CSS를 사용하여 요소의 최소 너비를 동적 높이와 동일하게 만들 수 있나요?

CSS를 통해 높이를 기준으로 요소 너비 설정

문제:

어떻게 보장할 수 있나요? 높이를 명시적으로 설정하지 않고도 요소의 최소 너비가 높이와 같다고 생각하시나요? 이는 높이가 동적이어서 미리 설정할 수 없는 경우에 특히 유용합니다.

가능한 해결 방법:

1. jQuery 접근 방식:

jQuery를 사용하면 요소의 최소 너비를 현재 높이와 일치하도록 설정할 수 있습니다.

$(document).ready(function() {
    $('.myClass').each(function() {
        $(this).css('min-width', $(this).css('height'));
    });
});

2. CSS 전용 접근 방식(가로세로 비율 트릭):

놀랍게도 JavaScript 없이 CSS에서 직접 원하는 동작을 달성하는 것이 가능합니다. 핵심은 요소:

.container {
    position: relative;
    display: inline-block;
    height: 50vh; /* Adjust this based on desired height */
}

.container > img {
    height: 100%; /* Inherits container's height */
}

.contents {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

요소는 본질적인 가로 세로 비율인 1:1을 유지하기 위해 너비를 자동으로 조정합니다. 이는 포함된 요소()는 항상 컨테이너의 높이와 같습니다.

사용자 정의:

가로세로 비율을 사용자 정의하려면 요소. 예를 들어 4:3 가로세로 비율을 만들려면 높이를 133%로 늘립니다.

라이브 데모:

https://jsbin.com/koyuxuh/edit

대체 방법(캔버스 또는 SVG):

또한 <캔버스> 또는 대신 요소 종횡비 동작을 생성합니다. 원칙은 동일합니다.

위 내용은 CSS를 사용하여 요소의 최소 너비를 동적 높이와 동일하게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!