Immagine ridimensiona in rapporto quando si ridimensiona verticalmente una finestra del browser?
-
12-11-2019 - |
Domanda
Ho articoli con display:table
e un involucro di immagine all'interno con display:table-cell
per ottenere l'allineamento verticale e orizzontale delle immagini. Le immagini sono impostate sull'80% di larghezza e altezza, quindi quando si ridimensionano il browserwindow, l'immagine dovrebbe ridimensionare in rapporto.
<article class="layer">
<div class="wrap">
<img src="whatever.jpg" alt="image"/>
</div>
</article>
html, body, #content {
margin: 0; padding: 0;
height: 100%;
width: 100%;
}
article.layer {
position: relative;
display: table;
height: 100%;
width: 100%;
}
article.layer img {
max-width: 80%;
max-height: 80%;
}
div.wrap {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Quello che sto cercando di fare è mantenere l'immagine sempre visualizzata completamente. Quindi non voglio che venga tagliato quando si ridimensiona il browserwindow. Questo funziona bene in questo momento quando ridimensivo il browserwindow orizzontalmente, tuttavia non lo è quando lo ridimensionalo verticalmente.
Ecco un campione: http://jsbin.com/ugumuj/10/edit#preview
C'è un modo per ottenere la stessa cosa quando si ridimensiona anche il browserwindow in verticale? Mi piacerebbe farlo in modo puro CSS, ma userei anche jQuery o JavaScript per farlo.
Qualche idea? Grazie in anticipo.
Nessuna soluzione corretta