너비 : 높이 비율을 유지하면서 작은 너비의 div 컨테이너에 맞도록 큰 이미지의 크기를 어떻게 자동 조정합니까?

예 : stackoverflow.com-이미지가 편집기 패널에 삽입되고 이미지가 너무 커서 페이지에 맞지 않으면 이미지의 크기가 자동으로 조정됩니다.

이미지 태그에 폭이나 높이를 명시 적으로 적용하지 마십시오. 대신, 그것을주십시오 :

max-width:100%;
max-height:100%;

또한, height: auto; 너비 만 지정하려는 경우.

예 : http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

객체 적합

다른 방법이 있습니다.

<img style='height: 100%; width: 100%; object-fit: contain'/>

일을 할 것입니다. CSS 3입니다.

피들 : http://jsfiddle.net/mbHB4/7364/

현재 JPEG 또는 PNG 파일과 같은 고정 크기 이미지를 사용하여 결정적인 방식으로이 작업을 올바르게 수행 할 수있는 방법이 없습니다.

이미지의 크기를 비례 적으로 조정하려면 높이 또는 너비를 "100 %" 로 설정 해야 합니다. 둘 다 "100 %"로 설정하면 이미지가 늘어납니다.

높이와 너비를 선택할지 여부는 이미지와 컨테이너 크기에 따라 다릅니다.

1. 이미지와 컨테이너가 모두 "세로 모양"이거나 "가로 모양"이거나 (가로 키보다 크거나 넓음) 높이 또는 너비가 "% 100"인 것은 중요하지 않습니다. .
2. 이미지가 세로이고 컨테이너가 가로 인 height="100%"경우 이미지를 설정해야합니다 .
3. 이미지가 가로이고 컨테이너가 세로 인 width="100%"경우 이미지를 설정해야합니다 .

이미지가 가변 크기의 벡터 이미지 형식 인 SVG 인 경우 컨테이너에 맞게 확장하여 자동으로 수행 할 수 있습니다.

SVG 파일에는 <svg>태그 에 다음 속성이 설정되어 있지 않아야합니다 .

height
width
viewbox

대부분의 벡터 드로잉 프로그램은 SVG 파일을 내보낼 때 이러한 속성을 설정하므로 내보낼 때마다 파일을 수동으로 편집하거나 스크립트를 작성해야합니다.

제공된 이미지가 너무 작거나 너무 커서 div에 맞지 않아도 이미지를 늘리지 않고 div 내에서 이미지를 세로 및 가로로 정렬하는 솔루션이 있습니다.

HTML 내용 :

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS 내용 :

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

jQuery 부분 :

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

간단하게!

컨테이너를 고정한 height 다음img 그 안에 태그 설정을 width하고 max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

차이점은을 설정 width하지 않고을 100 %로 설정했다는 것입니다 max-width.

아름다운 해킹.

이미지를 반응 형으로 만드는 두 가지 방법이 있습니다.

1. 이미지가 배경 이미지 인 경우

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

여기에서 실행

2. 이미지가 img태그에 있을 때 .

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

여기에서 실행

이미지를 배경으로 div로 설정 한 다음 CSS background-size 속성 을 사용할 수 있습니다 .

background-size: cover;

그것은 것 "배경 영역이 완전히 배경 화상에 포함되는 것이 가능하므로 한 크게 할 배경 화상 스케일 배경 화상의 일부가 배경에 위치 결정 영역 내에도있을 수 없다." - W3 스쿨을

내 솔루션을 확인하십시오 : http://codepen.io/petethepig/pen/dvFsA

JavaScript 코드없이 순수한 CSS로 작성되었습니다. 모든 크기와 방향의 이미지를 처리 ​​할 수 ​​있습니다.

그러한 HTML이 주어지면 :

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

CSS 코드는 다음과 같습니다.

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

방금 많은 옵션으로 필요한 것을 정확하게 수행하는 jQuery 플러그인을 게시했습니다.

https://github.com/GestiXi/image-scale

용법:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

자바 스크립트

$(function() {
    $("img.scale").imageScale();
});

이 솔루션은 이미지를 늘리지 않고 전체 컨테이너를 채우지 만 일부 이미지를 잘라냅니다.

HTML :

 <div><img src="/images/image.png"></div>

CSS :

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

많은 사람들이 좋은 선택 인 객체 적합 을 제안했습니다 . 그러나 이전 브라우저에서도 작동하려면 다른 방법으로 쉽게 수행 할 수 있습니다.

아주 간단합니다. 내가 취한 접근법은 이미지를 컨테이너 내부에 절대 위치 로 배치 한 다음 조합을 사용하여 중앙에 배치 하는 것입니다.

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

중앙에 있으면 이미지를 제공합니다.

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

이것은 이미지가 Object-fit : cover의 효과를 얻도록합니다.

위의 논리에 대한 데모입니다.

https://jsfiddle.net/furqan_694/s3xLe1gp/

이 논리는 모든 브라우저에서 작동합니다.

다음은 완벽하게 작동합니다.

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

JavaScript가 없어도 더 나은 솔루션이 있습니다. 완벽하게 반응하며 많이 사용합니다. 종종 종횡비의 이미지를 지정된 종횡비를 가진 컨테이너 요소에 맞춰야합니다. 이 모든 것을 완전히 반응하는 것은 필수입니다.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

최대 너비와 최대 높이를 독립적으로 설정할 수 있습니다. 이미지는 이미지의 값과 종횡비에 따라 가장 작은 이미지를 존중합니다. 원하는대로 이미지가 정렬되도록 설정할 수도 있습니다 (예를 들어, 무한한 흰색 배경에있는 제품 사진의 경우 중앙 중앙에 쉽게 배치 할 수 있음).

<img> 태그가 포함 된 div에 이미지에 필요한 높이와 너비를 지정하십시오. 적절한 스타일 태그에 높이 / 너비를 지정하는 것을 잊지 마십시오.

<img> 태그에서 제공 max-height및 max-width100 %로.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

올바른 클래스를 얻은 후에는 해당 클래스에 세부 사항을 추가 할 수 있습니다.

아래 코드는 이전 답변에서 수정되었으며라는 이미지를 사용하여 테스트했습니다 storm.jpg.

이것은 이미지를 표시하는 간단한 페이지를위한 완전한 HTML 코드입니다. 이것은 완벽하게 작동하며 www.resizemybrowser.com에서 테스트했습니다. CSS 코드를 HTML 코드 상단 머리 부분 아래에 놓습니다. 그림 코드를 원하는 곳에 놓으십시오.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

브라우저의 위치를 ​​브라우저에 알려야합니다.

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

편집 : Internet Explorer 11에서 이전 테이블 기반 이미지 위치 지정에 문제가있었습니다 ( 요소 max-height에서는 작동하지 않음 display:table). Internet Explorer 7과 Internet Explorer 11 모두에서 잘 작동 할뿐만 아니라 코드가 덜 필요한 인라인 기반 위치 지정으로 대체했습니다.

여기 주제에 대해 설명하겠습니다. 컨테이너의 크기가 지정된 경우에만 작동하며 ( 콘크리트 크기가없는 컨테이너 max-width와 max-height어울리지 않는 것 같지만) 재사용 할 수있는 방식으로 CSS 내용을 작성했습니다 ( picture-frame클래스 추가 과px125 기존 컨테이너에 대한 크기 클래스).

CSS에서 :

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

그리고 HTML에서 :

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

데모

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

편집 : JavaScript를 사용하여 추가 개선 가능 (이미지 업 스케일링) :

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

다음 코드를 사용하여이 문제를 해결했습니다.

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

여기 에 답변 된 대로 Chrome과 같은 브라우저에서 작동하지 않는 경우 vh대신 단위 를 사용할 수도 있습니다 max-height: 100%.

img {
    max-height: 75vh;
}

이 방법으로 가로 세로로 하이퍼 링크 내부의 이미지를 비례 적으로 중심에 맞추고 크기를 조정했습니다.

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Internet Explorer, Firefox 및 Safari에서 테스트되었습니다.

센터링에 대한 자세한 내용은 여기를 참조하십시오 .

이미지가 너무 작 으면 Thorn007에서 허용 된 답변이 작동 하지 않습니다 .

이를 해결하기 위해 스케일 팩터를 추가했습니다 . 이렇게하면 이미지가 커지고 div 컨테이너를 채 웁니다.

예:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

노트:

1. WebKit의 -webkit-transform:scale(4); -webkit-transform-origin:left top;경우 스타일을 추가해야합니다 .
2. 스케일 팩터가 4이면 최대 너비 = 400/4 = 100이고 최대 높이 = 200/4 = 50입니다.
3. 다른 해결책은 최대 너비와 최대 높이를 25 %로 설정하는 것입니다. 더 간단합니다.

부트 스트랩을 사용하는 경우 img-responsive클래스를 img태그 에 추가하면 됩니다 .

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

부트 스트랩 이미지

나를 위해 작동하는 간단한 솔루션 (4 단계 수정 !!)은 다음과 같습니다. 이 예에서는 너비를 사용하여 전체 크기를 결정하지만 대신 높이를 사용하도록 뒤집을 수도 있습니다.

1. 이미지 컨테이너에 CSS 스타일 적용 (예 : <img>)
2. width 속성을 원하는 치수로 설정하십시오
   • %크기의 경우 상대 크기 또는 자동 크기 조정에 사용 (이미지 컨테이너 또는 디스플레이 기반)
   • px정적 또는 설정된 치수에 사용 (또는 기타)
3. 너비에 따라 높이 속성이 자동으로 조정되도록 설정
4. 즐겨!

예를 들어

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

허용되는 답변을 포함하여 제공된 모든 답변 은 래퍼의 크기가 고정되어 있다는 가정 하에서 만 작동 합니다div . 이 방법 은 크기에 관계없이div 래퍼 이며 반응 형 페이지를 개발하는 경우 매우 유용합니다.

DIV선택자 안에 다음 선언을 작성하십시오 .

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

그런 다음이 선언을 IMG선택기 안에 넣으십시오 .

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

매우 중요:

의 값 maxHeight필수가 될 같은 모두에 대한 DIV및 IMG선택기.

간단한 해결책은 flexbox를 사용하는 것입니다. 컨테이너의 CSS를 다음과 같이 정의하십시오.

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

포함 된 이미지 너비를 100 %로 조정하면 크기가 유지 된 상태로 컨테이너에 멋진 중앙 이미지가 표시됩니다.

해결책은 약간의 수학으로 쉽습니다 ...

이미지를 div에 넣고 이미지를 지정하는 HTML 파일에 넣으십시오. 너비와 높이의 정확한 비율을 계산하려면 이미지의 픽셀 값을 사용하여 너비와 높이 값을 백분율로 설정하십시오.

예를 들어 너비가 200 픽셀이고 높이가 160 픽셀 인 이미지가 있다고 가정합니다. 너비 값이 더 큰 값이므로 너비 값이 100 %라고 안전하게 말할 수 있습니다. 그런 다음 높이 값을 계산하려면 높이를 너비로 나누면 백분율 값이 80 %가됩니다. 코드에서 다음과 같이 보일 것입니다 ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

이를 수행하는 가장 간단한 방법은 다음을 사용하는 것입니다 object-fit.

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

부트 스트랩을 사용하는 경우 img-responsive클래스를 추가하고

.container img{
    object-fit: cover;
}

내 답변 확인, 이미지 반응 형-가장 간단한 방법 -

img{
    width: 100%;
    max-width: 800px;
}

또는 단순히 다음을 사용할 수 있습니다.

background-position:center;
background-size:cover;

이제 이미지는 div의 모든 공간을 차지합니다.