Zachowanie / skalowanie DIV Ratio z procentami
W tej chwili mam układ, który ciągnie kilka miniatur do postacigrid
- każdy jest zdefiniowany przez styl, który zachowuje stały stosunek (około 16: 9), który jest określony przez wymiary pikseli (389px x 230px
), ale wyglądają na małe na ekranach o wysokiej rozdzielczości.
Obrazy są w rzeczywistości wciągane do DIV jako tło, które obejmuje100%
szerokość i wysokośćDIV
i wtedy DIV oczywiście kontrolują aspekt i rozmiar.
To, czego szukam, to dynamiczna zmiana rozmiaru tych DIV-ów na podstawie rozmiaru strony urządzenia, ale utrzymanie proporcji DIV-ów.
czy to możliwe?
Moim zdaniem byłoby ustawić szerokość na podstawie procentu strony, ale nie jestem pewien, jak ustawiłbym wysokość i zachował właściwy współczynnik proporcji (z powodu różnych rozdzielczości itp.)
Jaki byłby najlepszy sposób, aby to zrobić?
EDYTOWAĆ - Dziękuję za wszystkie dotychczasowe pomysły, pomyślałem, że może powinienem pokazać ci, jak w tej chwili wciągam dane.
W moim HTML mam następujący kod, który wygenerował siatkę
<a class="griditem" href="../video.php?video=13" style="background-image:url(../video/Relentless/Relentless.jpg); background-size:100% 100%;">
<div class="titles">
<h5>Relentless Short Stories</h5>
<h6>Frank Turner: The Road</h6>
</div>
Jest to stylizowany za pomocą następującego CSS
.griditem {
position: relative;
float: left;
margin-right: 17px;
margin-bottom: 17px;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 389px;
height: 230px;
text-align: left;
}
.titles {
padding: 5px;
position: absolute;
bottom: 10px;
left: -1px;
right: -1px;
background: transparent url(../images/layout/white80.png) top left;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
text-align: left;
}
Powodem, dla którego implementuję to w ten sposób, jest to, że Div może unosić się nad dnem obrazu.