Come creare un'immagine reattiva che si ridimensiona anche in Bootstrap 3

Attualmente sto utilizzando Twitter Bootstrap 3 e sto affrontando un problema per creare un'immagine reattiva. Ho usato la img-responsiveclasse. Ma la dimensione dell'immagine non aumenta. Se lo uso al width:100%posto di max-width:100%allora funziona perfettamente. Dov'è il problema? Questo è il mio codice:

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

La classe di immagini reattive di Bootstrap è impostata max-widthal 100%. Ciò limita le sue dimensioni, ma non lo obbliga ad allungarsi per riempire gli elementi principali più grandi dell'immagine stessa. Dovresti usare l' widthattributo per forzare l'upscaling.

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

Certo le cose!

.img-responsive è il modo giusto per rendere le immagini reattive con bootstrap 3 Puoi aggiungere qualche regola di altezza per l'immagine che vuoi rendere reattiva, perché con responsabilità, la larghezza cambia lungo l'altezza, aggiustala ed eccoti.

Non sono sicuro che ti aiuti ancora ... ma ho dovuto fare un piccolo trucco per ingrandire l'immagine ma mantenerla reattiva

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

}

Spero che aiuti PS La larghezza massima può essere qualsiasi cosa tu voglia

Se l'impostazione di una larghezza fissa sull'immagine non è un'opzione, ecco una soluzione alternativa.

Avere un div genitore con display: table & table-layout: fixed. Quindi impostare l'immagine da visualizzare: table-cell e max-width al 100%. In questo modo l'immagine si adatterà alla larghezza del suo genitore.

Esempio:

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

Prova quanto segue nel tuo foglio di stile CSS:

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

Prova a farlo:

1) Nel tuo 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) Nel tuo style.css

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

Ho scoperto che puoi mettere la classe .col sull'immagine farà il trucco - tuttavia questo dà un riempimento extra insieme a qualsiasi altro attributo associato alla classe come float left, tuttavia questi possono essere cancellati ad esempio un no padding classe come aggiunta.

Immagino che l'immagine sia danneggiata. Esempio: la dimensione dell'immagine è 195px X 146px.

Funzionerà con risoluzioni inferiori come i tablet. Quando si ha una risoluzione di 1280 X 800, verrà forzata una maggiore in quanto c'è anche una larghezza del 100%. Forse CSS all'interno di media query come i caratteri delle icone è la soluzione migliore.