В настоящее время я создаю веб-страницу с изображениями, и мне нравятся адаптивные рендеры.Я хотел бы, чтобы мои последние 4 изображения шли друг под другом, центрируясь при сохранении их размера.
Мой код до сих пор:
<div id="banniere">
<img src="images/banniere.jpg" alt="FAST & FURIOUS 9">
</div>
<div id="content">
<img src="images/Fond.jpg" alt="FAST & FURIOUS 9">
</div>
<div id="trailer">
<div>
<iframe max-width="640" src="https://www.youtube.com/embed/K_8jNjPOUqQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div id="news">
<img src="images/photo-news.jpg" alt="FAST & FURIOUS 9">
</div>
<div id="texte">
<h3>FAST & FURIOUS 9 a été retardé d'un an</h3>
<p>
Universal Pictures a fait savoir que la sortie du neuvième volet de<br>
la franchise“Fast and Furious” a été repoussée d’un an.
</p>
<p>
Si la projection du film devait être lancée le 19 avril 2019, sa sortie<br>
au cinéma a été reportée au 10 avril 2020 – pendant le week-end<br>
pascal. Aucun réalisateur n’est associé au film pour le moment. La <br>
plupart des acteurs de la franchise rempile pour « Fast 9 »,dont<br>
Vin Diesel.
</p>
<p>
Après la sortie de “Fast & Furious 8” en début d’année, Universal <br>
a commencé à concocter une histoire pour un spin-off avec<br>Dwayne Johnson et Jason Statham pour commencer.
</p>
</div>
<ul id="acteur">
<li>
<img src="images/Dwayne-Johnson.jpg" alt="FAST & FURIOUS 9">
<p>
Dwayne Johnson
</p>
</li>
<li>
<img src="images/jordana_brewster.jpg" alt="FAST & FURIOUS 9">
<p>
Jordana Brewster
</p>
</li>
<li>
<img src="images/Michelle-Rodriguez.jpg" alt="FAST & FURIOUS 9">
<p>
Michelle Rodriguez
</p>
</li>
<li id="vin">
<img src="images/vin-diesel.jpg" alt="FAST & FURIOUS 9">
<p>
Vin Diesel
</p>
</li>
</ul>
#content {
min-width: 100%;
min-height: 100%;
position: absolute;
width:auto;
height:auto;
}
#trailer {
max-width: 1000px;
margin: auto;
}
#trailer div {
top: 60px;
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#trailer iframe,
#trailer object,
#trailerr embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#news {
width:250px;
height:250px;
float: left;
margin-top: 95px;
position: relative;
padding-left: 180px;
display: block;
}
#texte {
font-family:"Antique-Olive";
font-size: 18px;
margin-left:546px;
margin-top: 75px;
float: right;
position: absolute;
color: white;
}
#texte h3 {
margin-left:10px;
}
#acteur {
font-family:"Antique-Olive";
font-size:20px;
margin-left: 40px;
padding-left: 80px;
margin-top: 425px;
}
#acteur li {
width:200px;
height:200px;
float: left;
list-style: none;
display: block;
padding-left: 65px;
position: relative;
}
#acteur img {
display: block;
position:relative;
z-index:1;
height:200px;
width:200px;
}
#acteur li p {
color: white;
margin-top:20px;
margin-left: 22px;
}
#acteur li#vin p {
margin-left: 60px;
}
@media screen and (max-width: 480px){
#texte {
float: none;
margin:50px auto;
height:180px;
}
#banniere {
height: 100px;
}
#texte h3,p {
font-size: 18px;
top: 10px;
left: 15px;
}
#acteur p {
font-size: 18px;
top: 60px;
left: 45px;
}
#news {
float: none;
margin:auto;
width: 250px;
height: 250px;
}
#acteur {
width:250px;
height:250px;
float:none;
margin:100px auto;
}
#acteur img {
width:230px;
}
}
@media screen and (max-width: 720px) {
#texte {
float: none;
margin:50px auto;
height:180px;
}
#banniere {
height: 100px;
}
#texte h3,p {
font-size: 18px;
top: 10px;
left: 15px;
}
#acteur p {
font-size: 18px;
top: 60px;
left: 45px;
}
#news {
float: none;
margin:auto;
width: 250px;
height: 250px;
}
#acteur {
width:250px;
height:250px;
float:none;
margin:100px auto;
}
#acteur img {
width:230px;
}
}
В настоящее время я создаю веб-страницу с изображениями иЯ буду любить отзывчивые рендеры.Я бы хотел, чтобы мои последние 4 изображения располагались друг под другом, центрируясь при сохранении их размера.