너비 : 높이 비율을 유지하면서 작은 너비의 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입니다.
답변
현재 JPEG 또는 PNG 파일과 같은 고정 크기 이미지를 사용하여 결정적인 방식으로이 작업을 올바르게 수행 할 수있는 방법이 없습니다.
이미지의 크기를 비례 적으로 조정하려면 높이 또는 너비를 “100 %” 로 설정 해야 합니다. 둘 다 “100 %”로 설정하면 이미지가 늘어납니다.
높이와 너비를 선택할지 여부는 이미지와 컨테이너 크기에 따라 다릅니다.
- 이미지와 컨테이너가 모두 “세로 모양”이거나 “가로 모양”이거나 (가로 키보다 크거나 넓음) 높이 또는 너비가 “% 100″인 것은 중요하지 않습니다. .
- 이미지가 세로이고 컨테이너가 가로 인
height="100%"경우 이미지를 설정해야합니다 . - 이미지가 가로이고 컨테이너가 세로 인
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.
답변
아름다운 해킹.
이미지를 반응 형으로 만드는 두 가지 방법이 있습니다.
- 이미지가 배경 이미지 인 경우
#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>여기에서 실행
그러나 하나를 사용해야 img은보다 낫다으로 이미지를 넣어 태그를 background-image측면에서 SEO 당신이 쓸 수있는 키워드 에서 alt의 img태그입니다. 이미지를 반응 형으로 만들 수 있습니다.
- 이미지가
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 스쿨을