verticale imbottitura di immagini responsive

Question

Questo CSS:

.outer-img-wrap { 
    border: 2px solid gray; 
    margin: 1vw auto; 
    max-width: 192px; 
    text-align: center; 
    overflow: hidden; 
} 
.outer-img-wrap img { 
    width: auto !important; 
    height: auto !important; 
    max-width: 100%; 
    vertical-align: middle; 
} 
.inner-img-wrap { 
    background: #000; 
    border: thin solid #ff9900; 
    margin: 2px; 
} 

richiesto questo HTML:

<td style="width: 25%"> 
    <div class="outer-img-wrap"> 
     <div class="inner-img-wrap"> 
      <img src="http://placehold.it/64x64" /> 
     </div> 
    </div> 
</td> 

produce centrato immagini responsive in una cella di tabella della larghezza appropriata. Tutte le immagini finiscono per avere la stessa larghezza e questo è quello che voglio.

Vorrei anche che le immagini abbiano la stessa altezza in modo reattivo. Così ho aggiunto questo Javascript alla pagina per aggiornare il padding.

function resizeImageElements() 
{ 
    var imageElements = $(".outer-img-wrap .inner-img-wrap img"); 
    var imageElementsMaxHeight = -1; 
    imageElements.map(function(index) { 
     // compare the height of the img element 
     if($(this).height() > imageElementsMaxHeight) { 
      imageElementsMaxHeight = $(this).height(); 
     } 
    }); 

    imageElements.map(function(index) { 
     var computeTopBottomPadding = (imageElementsMaxHeight - $(this).height())/2; 
     $(this).css({ 
      "padding-top": computeTopBottomPadding, 
      "padding-bottom": computeTopBottomPadding, 
     }); 
    }); 
} 

resizeImageElements(); 

Il Domanda è: Posso ottenere lo stesso effetto senza il codice Javascript; usando solo i CSS?

Fiddle a http://jsfiddle.net/ybkgLq4d/

Answer 1

Beh, non è chiaro dove si sta prendendo quelle immagini da. Se sei in grado di gestire queste immagini in un server di backend (usando phm, Python o ruby), puoi sempre crearne una versione usando un rapporto fisso, in modo che abbiano le stesse dimensioni quando ridimensionate nel tuo frontend . Questa sarebbe la mia opzione preferita.

Se non si è in grado o non si desidera creare una versione diversa dell'immagine, credo che la soluzione migliore sarebbe utilizzare un elemento con un'immagine di sfondo anziché l'elemento immagine stesso e utilizzare la dimensione di sfondo per adatta alle tue esigenze

Ad esempio:

.outer-img-wrap { 
    border: 2px solid gray; 
    margin: 1vw auto; 
    max-width: 192px; 
    text-align: center; 
    overflow: hidden; 
} 
.outer-img-wrap .img { 
    display:inline-block; 
    position:relative; 
    vertical-align: middle; 
    width:100%; 
    background-position:center center; 
    height:50px; /* or whatever height you want, you could use % value too relative to it's parent element */ 

    /* cross browser */ 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    -ms-background-size:cover; 
    -webkit-background-size:cover; 
    background-size:cover; 
} 
.inner-img-wrap { 
    background: #000; 
    border: thin solid #ff9900; 
    margin: 2px; 
} 

applicata a questo html:

<td style="width: 25%"> 
    <div class="outer-img-wrap"> 
     <div class="inner-img-wrap"> 
      <div class="img" style="background-image:url(http://placehold.it/64x64)"></div> 
     </div> 
    </div> 
</td> 

Fiddle: https://jsfiddle.net/ybkgLq4d/14/

Answer 2

ho cercato di mantenere il più semplice markup e giocato un po 'con :before e box-shadow e calc .

* { 
 
    box-sizing: border-box; 
 
} 
 
.pic { 
 
    background-color: black; 
 
    border: 2px solid gray; 
 
    box-shadow: inset 2px 2px 0 0 white, inset -2px -2px 0 0 white, inset 3px 3px 0 0 orange, inset -3px -3px 0 0 orange; 
 
    max-width: 192px; 
 
    position: relative; 
 
    width: 25%; 
 
} 
 
.pic:before { 
 
    content: ''; 
 
    display: block; 
 
    padding-bottom: 100%; 
 
} 
 
img { 
 
    display: block; 
 
    left: 50%; 
 
    max-width: calc(100% - 6px); 
 
    position: absolute; 
 
    -webkit-transform: translate3d(-50%, -50%, 0); 
 
    transform: translate3d(-50%, -50%, 0); 
 
    top: 50%; 
 
} 
 

 
/* for layout */ 
 

 
figure { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
figcaption { 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    padding-left: 1em; 
 
}

<figure> 
 
    <div class="pic"> 
 
    <img src="http://placehold.it/64x64"> 
 
    </div> 
 
    <figcaption>text text text 
 
    <figcaption> 
 
</figure> 
 
<figure> 
 
    <div class="pic"> 
 
    <img src="http://placehold.it/400x300"> 
 
    </div> 
 
    <figcaption>text text text 
 
    <figcaption> 
 
</figure> 
 
<figure> 
 
    <div class="pic"> 
 
    <img src="http://placehold.it/128x128"> 
 
    </div> 
 
    <figcaption>text text text 
 
    <figcaption> 
 
</figure>