태그 보관물: image

image

‘div’컨테이너에 맞게 이미지의 크기를 자동 조정하는 방법은 무엇입니까? 자동 조정합니까? 예 :

너비 : 높이 비율을 유지하면서 작은 너비의 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>

여기에서 실행

그러나 하나를 사용해야 img은보다 낫다으로 이미지를 넣어 태그를 background-image측면에서 SEO 당신이 쓸 수있는 키워드 에서 alt의 img태그입니다. 이미지를 반응 형으로 만들 수 있습니다.

  1. 이미지가 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 스쿨을