CSS에 비례하여 이미지 크기를 조정하시겠습니까?

CSS에 비례하여 이미지 크기를 조정하시겠습니까?

이 질문에는 이미 답변이 있습니다.

가로 세로 비율을 유지하면서 이미지 크기를 자동 조정하는 방법 (33개의 답변)

닫힘4년 전에요.

CSS만을 사용하여 이미지의 크기를 비례적으로 조정할 수 있는 방법이 있습니까?

JavaScript 방식을 사용하고 있습니다만, 이것이 CSS에서 가능한지 확인하려고 합니다.

CSS를 사용하여 이미지의 크기를 비례적으로 조정하려면 다음 절차를 수행합니다.

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

크기를 제어하고 비율을 유지합니다.

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

배경 이미지인 경우 background-size:contain을 사용합니다.

예:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

해라

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

객체 맞춤 특성을 사용할 수 있습니다.

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

비례적으로 변경하지 않고 이미지에 맞춥니다.

주의해 주세요width:50%이미지 사용 가능한 공간의 50%로 크기를 조정합니다.max-width:50%이미지 크기를 원래 크기의 50%로 조정합니다.모바일 웹 디자인에서는 이 규칙을 사용하는 것이 매우 중요합니다.따라서 모바일 웹 디자인에서는 이 규칙을 사용합니다.max-width항상 사용해야 합니다.

업데이트: 이것은 오래된 Firefox 버그일 수 있으며, 현재 수정되어 있는 것으로 보입니다.

가로 세로 비율을 유지하여 이미지 크기를 조정하려면 다음과 같이 하십시오.

이거 드셔보세요.

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

2015년 재방문:

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

위의 Cherif가 제안하는 일반적인 브라우저는 모두 auto로 동작하기 때문에 이미지의 폭이 큰지 아닌지를 알 필요가 없기 때문에 더 잘 동작합니다.

이전 버전:예를 들어 120x100 박스로 제한되어 있는 경우 다음을 수행할 수 있습니다.

<img src="http://image.url" height="100" style="max-width: 120px">

<img style="width: 50%;" src="..." />

나한테는 잘 먹혔어...아니면 제가 뭘 놓치고 있는 건가요?

편집: 그러나 실수로 상승하는 것에 대한 Shawn의 경고를 참조하십시오.

css 속성 max-width 및 max-height는 정상적으로 동작하지만 IE6 및 IE7에서는 지원되지 않습니다.실수로 이미지 크기를 늘리지 않도록 높이/너비 이상으로 사용하는 것이 좋습니다.최대 높이/폭을 비례적으로 제한하기만 하면 됩니다.

img{
    max-width:100%;
    object-fit: scale-down;
}

잘 먹히네요.큰 이미지는 상자에 맞게 축소하지만 작은 이미지는 원래 크기로 유지합니다.

이것이 가장 쉬운 방법이며, 인라인 사용도 가능하다고 생각합니다.style내의 속성<img>태그를 붙입니다.

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

또는

<img src="flower.png" style="transform: scale(0.7);">

이 간단한 스케일링 기술을 사용합니다.

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

img {
    max-width:100%;
}

div {
    width:100px;
}

이 단편으로 보다 효율적인 방법으로 할 수 있습니다.

브라우저의 CSS를 사용하여 미디어 쿼리와 응답성 설계의 원리를 사용하여 이미지 크기를 조정할 수 있습니다.

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

넌 항상 이런 게 필요해

html
{
    width: 100%;
    height: 100%;
}

css 파일의 맨 위에

이것을 시험해 보세요.

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

image_tag("/icons/icon.gif", height: '32', width: '32')높이: '50px', 너비: '50px'에서 이미지 태그로 이 코드를 설정해야 합니다.첫 번째 시도 노트에서는 위의 모든 코드를 사용했지만 아무 소용이 없었습니다.을 사용하다_nav.contract.erb.erbb이다
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

언급URL : https://stackoverflow.com/questions/787839/resize-image-proportionally-with-css