Jak stworzyć responsywny obraz, który skaluje się również w Bootstrap 3

Obecnie używam Twittera Bootstrap 3 i mam problem z utworzeniem responsywnego obrazu. Użyłem img-responsiveklasy. Ale rozmiar obrazu nie zwiększa się. Jeśli width:100%zamiast tego max-width:100%użyję, to działa idealnie. Gdzie jest problem? To jest mój kod:

    <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>

Klasa responsywnego obrazu Bootstrap jest ustawiona na max-width100%. Ogranicza to jego rozmiar, ale nie wymusza rozciągania go w celu wypełnienia elementów nadrzędnych większych niż sam obraz. Musiałbyś użyć tego widthatrybutu, aby wymusić skalowanie w górę.

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

Pewne rzeczy!

.img-responsive to właściwy sposób na tworzenie responsywnych obrazów za pomocą bootstrap 3 Możesz dodać regułę wysokości dla obrazu, który chcesz, aby był responsywny, ponieważ z odpowiedzialnością szerokość zmienia się wraz z wysokością, napraw to i gotowe.

Nie jestem pewien, czy to ci pomoże ... ale musiałem zrobić małą sztuczkę, aby powiększyć obraz, ale utrzymując go responsywnie

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

}

Mam nadzieję, że to pomoże. PS Maksymalna szerokość może być dowolna

Jeśli ustawienie stałej szerokości obrazu nie jest możliwe, oto alternatywne rozwiązanie.

Posiadanie nadrzędnego div z wyświetlaczem: table i table-layout: fixed. Następnie ustawiam obraz do wyświetlenia: tabela-komórka i maksymalna szerokość na 100%. W ten sposób obraz dopasuje się do szerokości swojego rodzica.

Przykład:

<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>

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

Spróbuj wykonać następujące czynności w swoim arkuszu stylów CSS:

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

Spróbuj to zrobić:

1) W pliku 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) W Twoim style.css

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

Zauważyłem, że możesz umieścić klasę .col na obrazku, aby załatwić sprawę - jednak daje to dodatkowe wypełnienie wraz z innymi atrybutami związanymi z klasą, takimi jak float left, jednak można je anulować, na przykład, bez dopełnienia klasa jako dodatek.

Wydaje mi się, że obraz jest uszkodzony. Przykład: rozmiar obrazu to 195 pikseli x 146 pikseli.

Będzie działać w niższych rozdzielczościach, takich jak tablety. Gdy masz rozdzielczość 1280 x 800, będzie to większe, ponieważ szerokość również wynosi 100%. Być może najlepszym rozwiązaniem jest CSS w zapytaniu o media, takim jak czcionki ikon.