부트스트랩 3에서도 스케일업이 가능한 반응형 이미지를 만드는 방법

부트스트랩 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>

부트스트랩의 반응형 이미지 클래스 세트max-width100%로이렇게 하면 크기가 제한되지만 이미지 자체보다 큰 상위 요소를 채우도록 강제로 늘어나지는 않습니다.당신이 사용해야 할 것입니다.width업스케일링을 강제합니다.

http://getbootstrap.com/css/ #images 대응

물론이죠!

.img-responsive부트스트랩 3으로 이미지를 반응하게 만드는 올바른 방법입니다. 책임감을 가지고 높이를 따라 폭이 변하기 때문에 반응하게 만들 사진에 높이 규칙을 추가할 수 있습니다.

이미지를 더 크게 만들되 반응성을 유지하기 위해 작은 속임수를 써야 했습니다.

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

}

추신: 최대 너비는 원하시는 대로 가능합니다.

이미지에 고정 너비를 설정하는 것이 선택 사항이 아닌 경우 다음과 같은 대안이 있습니다.

디스플레이가 있는 부모 디브가 있는 경우: 테이블 & 테이블 레이아웃: 고정.그런 다음 표시할 이미지를 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>

Fiddle: http://jsfiddle.net/5y62c4af/

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

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

그렇게 해 봅니다.

1) 인덱스 .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) 스타일대로.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가 가장 좋은 해결책일 수 있습니다.

언급URL : https://stackoverflow.com/questions/18903183/how-to-create-a-responsive-image-that-also-scales-up-in-bootstrap-3