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

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

스타일 를 할 수 .width: 100%그리고.auto높이에서(또는 그 반대의 경우), 그러나 이미지를 각각 너무 넓거나 너무 높거나 특정 위치로 제한할 수는 없습니다.

무슨 생각 있어요?

영상에 하나의 차원만 정의하면 영상 종횡비가 항상 유지됩니다.

이미지가 당신이 원하는 것보다 더 크거나 더 큰 문제가 있습니까?

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

이미지의 너비가 100%이고 높이가 auto인 경우, 가로 세로 비율이 유지되기 때문에 이미지의 높이가 너무 높다고 생각됩니다.자르기를 하거나 가로 세로 비율을 변경해야 합니다.

구체적으로 이루고자 하는 것에 대해 더 많은 정보를 제공해주시면 더 많은 도움을 드릴 수 있도록 노력하겠습니다!

--- FEEDB 기반 편집ACK ---

최대 너비 및 최대 높이 속성에 대해 잘 알고 계십니까?대신에 항상 설정할 수 있습니다.최소값을 설정하지 않고 최대 높이와 너비를 설정하면 이미지가 왜곡되지 않고(종횡비가 보존됩니다), 길이가 가장 긴 치수보다 더 크지 않고 최대치에 도달합니다.

몇 년 후, 같은 요구 사항을 찾으면서, 저는 백그라운드 사이즈를 사용하는 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

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

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

max-width산의 100%할 수 , .

설정height산의 auto는 이미지의 가로 세로 비율을 유지하며, 이 기술을 사용하여 정적 높이를 무시하고 이미지가 모든 방향으로 비례적으로 휘어질 수 있도록 합니다.

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

같은 문제가 있었습니다.문제는 높이 속성이 다른 곳에서도 이미 정의되어 있다는 것이었습니다. 이렇게 고정시킨 것입니다.

.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%);

정말 기대했던 대로 되겠군요 :)

답변 중 하나는 배경 크기를 포함합니다: contain css statement는 당신이 하고 싶은 것에 대한 간단한 설명이고 브라우저는 그것을 하기 때문에 내가 매우 좋아하는 것입니다.

안타깝게도 조만간 배경 이미지 솔루션에서 잘 재생되지 않는 그림자를 적용해야 할 것입니다.

따라서 반응성이 있지만 최소 및 최대 너비와 높이에 대한 경계가 잘 정의되어 있는 컨테이너가 있다고 가정해 보겠습니다.

.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);
}

좋은 그림자가 있다는 것을 참고하세요 ;)

이 fiddle: http://jsfiddle.net/pligor/gx8qthqL/2/ 에서 라이브 예제를 즐겨보세요.

저는 이것을 높이와 폭이 고정되어 있지만 크기가 다른 이미지를 가진 직사각형 용기에 사용합니다.

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

에는 를 할 수 .vw그리고.vh뷰포트의 너비와 높이 각각의 1%를 나타내는 단위입니다.

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

예를 들어 다음과 같습니다.

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

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

가로 세로 비율을 준수해야 하는 차원에서 자동을 사용하는 것이 가장 좋습니다.다른 속성을 auto로 설정하지 않으면 현재 대부분의 브라우저에서 가로 세로 비율을 준수할 것으로 가정하지만 모든 브라우저가 그런 것은 아닙니다(예를 들어 window 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 override를 사용하기 때문에 적절하지 않더라도 높이와 너비를 설정하는 WordPress와 같은 CMS를 사용하는 경우에는 잘 작동합니다.

CSS는 일반적인 오해이기 때문에 JQuery를 사용하십시오(단순한 설계 목표에 대한 수많은 질문과 논의를 통해 알 수 있음).

CSS에서는 원하는 것을 수행할 수 없습니다. 이미지의 너비는 100%가 되어야 하지만, 이 너비로 인해 높이가 너무 클 경우 최대 높이가 적용되어야 하며, 당연히 정확한 비율이 유지되어야 합니다.

가로세로 비율을 왜곡하지 않고 100%의 폭을 시도하고 최대 높이를 강제하려면 다음을 추가할 수 있습니다.max-height와 결합된 선언object-fit:contain.

width:100%;
max-height: 600px;
object-fit: contain;

이게 당신이 찾으시는 물건인 것 같아요, 제가 직접 찾다가 코드를 찾기 전에 다시 기억이 났어요.

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

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

언급URL : https://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio