Bootstrap 3에서도 확장되는 반응 형 이미지를 만드는 방법

현재 트위터 부트 스트랩 3을 사용하고 있으며 반응 형 이미지를 만드는 데 문제가 있습니다. 나는 img-responsive수업 을 사용했습니다 . 그러나 이미지 크기는 확대되지 않습니다. width:100%대신 사용하면 max-width:100%완벽하게 작동합니다. 문제는 어디입니까? 이것은 내 코드입니다.

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Bootstrap의 반응 형 이미지 클래스는 max-width100 %로 설정 됩니다. 이렇게하면 크기가 제한되지만 이미지 자체보다 큰 상위 요소를 채우기 위해 강제로 늘어나지는 않습니다. width업 스케일링을 강제 하려면 속성 을 사용해야합니다 .

http://getbootstrap.com/css/#images-responsive

물론 이죠!

.img-responsive 부트 스트랩 3을 사용하여 이미지를 반응 형으로 만드는 올바른 방법입니다. 반응 형으로 만들고자하는 그림에 높이 규칙을 추가 할 수 있습니다. 책임감에 따라 너비가 높이를 따라 변경되고 고정됩니다.

여전히 도움이되는지 확실하지 않지만 이미지를 더 크게 만들지 만 반응을 유지하기 위해 작은 트릭을 수행해야했습니다.

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

PS 도움이 되었기를 바랍니다. 최대 너비는 원하는대로 지정할 수 있습니다.

이미지에 고정 너비를 설정하는 것이 옵션이 아닌 경우 대체 솔루션이 있습니다.

display : table & table-layout : fixed가있는 상위 div가 있습니다. 그런 다음 표시 할 이미지를 설정합니다 : table-cell 및 max-width를 100 %로 설정합니다. 이렇게하면 이미지가 부모의 너비에 맞춰집니다.

예:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

바이올린 : http://jsfiddle.net/5y62c4af/

CSS 스타일 시트에서 다음을 시도하십시오.

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

그렇게하려고 :

1) index.html에서

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) style.css에서

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

이미지에 .col 클래스를 넣을 수 있다는 것을 알았습니다. 그러나 이것은 float left와 같은 클래스와 관련된 다른 속성과 함께 추가 패딩을 제공하지만 패딩 없음과 같이 취소 할 수 있습니다. 추가로 클래스.

이미지가 손상된 것 같습니다. 예 : 이미지 크기는 195px X 146px입니다.

태블릿과 같은 낮은 해상도에서 작동합니다. 해상도가 1280 X 800 인 경우 너비도 100 %이므로 더 크게 강제됩니다. 아이콘 글꼴과 같은 미디어 쿼리 내부의 CSS가 최상의 솔루션 일 수 있습니다.