CSS : 가로 세로 비율을 유지하면서 100 % 너비 또는 높이?

현재 STYLE을 사용 하면 높이 width: 100%와 auto높이를 사용할 수 있지만 그 반대의 경우에도 이미지를 각각 너무 넓거나 키가 큰 특정 위치로 제한 할 수는 없습니다.

어떤 아이디어?

이미지에 하나의 치수 만 정의하면 이미지 종횡비가 항상 유지됩니다.

이미지가 선호하는 것보다 더 크거나 더 큰 문제입니까?

이미지에 대해 원하는 최대 높이 / 폭으로 설정된 DIV에 넣은 다음 overflow : hidden을 설정할 수 있습니다. 그것은 당신이 원하는 것 이상으로 아무것도 자르지 않을 것입니다.

이미지가 100 % 너비 및 높이 : 자동이고 이미지가 너무 크다고 생각하면 가로 세로 비율이 유지되기 때문입니다. 화면 비율을 자르거나 변경해야합니다.

구체적으로 달성하려는 내용에 대한 추가 정보를 제공해 주시면 더 도와 드리겠습니다.

--- 피드백 기반 편집 ---

max-width 및 max-height 속성에 익숙 하십니까? 항상 대신 설정할 수 있습니다. 최소값을 설정하지 않고 최대 높이와 ​​너비를 설정하면 이미지가 왜곡되지 않고 (가로 세로 비율이 유지됨) 가장 긴 치수보다 크지 않고 최대 값에 도달하지 않습니다.

몇 년 후 동일한 요구 사항을 찾고 배경 크기를 사용하는 CSS 옵션을 찾았습니다.

최신 브라우저 (IE9 +)에서 작동해야합니다.

<div id="container" style="background-image:url(myimage.png)">
</div>

그리고 스타일 :

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

참조 : http://www.w3schools.com/cssref/css3_pr_background-size.asp

그리고 데모 : http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

CSS max-width속성을 로 설정하면 100%이미지가 부모 요소의 너비를 채우지 만 실제 크기보다 크게 렌더링되지 않으므로 해상도가 유지됩니다.

이 기술을 사용하여 이미지의 종횡비 height를 auto유지 하도록 속성을 설정 하면 정적 높이를 무시하고 이미지가 모든 방향으로 비례 적으로 구부러 질 수 있습니다.

img {
    max-width: 100%;
    height: auto;      
}

단순하고 우아한 작업 솔루션 :

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

같은 문제가 있었다. 나를위한 문제는 height 속성이 이미 다른 곳에 정의되어 다음과 같이 수정되었다는 것입니다.

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

간단한 해결책 :

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

그건 그렇고, 부모 div 컨테이너의 중앙에 배치하려는 경우 해당 CSS 속성을 추가 할 수 있습니다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

실제로 예상대로 작동해야합니다. :)

대답 중 하나는 background-size를 포함합니다 .cs 문을 포함 하십시오.

불행히도 조만간 배경 이미지 솔루션과 잘 어울리지 않는 그림자 를 적용해야합니다 .

따라서 반응 형 이지만 최소 및 최대 너비 및 높이에 대한 경계가 잘 정의 된 컨테이너가 있다고 가정 해 봅시다 .

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

그리고 컨테이너에는 이미지가 넘치거나 잘리는 것을 피하기 위해 컨테이너 높이의 픽셀을 알고 있어야하는 img가 있습니다.

img는 또한 더 작은 너비를 렌더링하고 둘째로 백분율을 기반으로하여 파라 메트릭으로 만들 수 있도록 최대 너비를 100 %로 정의해야합니다.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

그림자가 좋습니다.)

이 바이올린에서 라이브 예제를 즐기십시오 : http://jsfiddle.net/pligor/gx8qthqL/2/

높이와 너비가 고정되어 있지만 크기가 다른 이미지가있는 직사각형 컨테이너에 이것을 사용합니다.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

가로 세로 비율을 고려해야하는 치수에서 자동을 사용하는 것이 가장 좋습니다. other 속성을 auto로 설정하지 않으면 요즘 대부분의 브라우저는 종횡비를 존중한다고 가정하지만 모든 것을 다하지는 않습니다 (예 : Windows Phone 8의 IE10은 그렇지 않음).

width: 100%;
height: auto;

이것은 conca의 링크를 따라 배경 크기를 본 후에 생각해 낸 매우 간단한 솔루션입니다. 이미지를 확대 한 다음 이미지를 스케일링하지 않고 외부 컨테이너의 중앙에 맞 춥니 다.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

오래된 문제로 뛰어 들지 말고 ...

#container img {
      max-width:100%;
      height:auto !important;
}

높이에서! important 재정의를 사용할 때 이것이 적절하지 않더라도 WordPress와 같은 CMS를 사용하여 높이와 너비를 설정하면 제대로 작동합니다.

요즘 한 사용 vw과 vh의 1 % 나타내는 단위 V iewport이기 승 IDþ 및 H 각각 여덟.

https://css-tricks.com/fun-viewport-units/

예를 들어,

img {
  max-width: 100vw;
  max-height: 100vh;
}

... 가로 세로 비율을 유지하면서 뷰포트의 100 %보다 크거나 크게하지 않으면 서 이미지를 최대한 크게 만듭니다.

CSS는 일반적인 오해이므로 JQuery 등을 사용하십시오 (단순한 디자인 목표에 대한 수많은 질문과 토론에서 알 수 있습니다).

CSS를 사용하여 원하는 것처럼 할 수는 없습니다. 이미지의 너비는 100 % 여야하지만이 너비의 높이가 너무 큰 경우 최대 높이가 적용됩니다. 물론 올바른 비율이 적용됩니다. 보존.

나는 이것이 당신이 찾고있는 것이라고 생각합니다. 나는 그것을 내 자신을 찾고 있었지만 코드를 발견하기 전에 다시 기억했습니다.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

디지털 진화가 진행되고 있습니다.