Question

目前我正在创建一个带有图片的网页，我会喜欢自适应渲染。我希望我的最后4张图像能够在保持其大小的同时居中。

我的代码到现在为止：

{p}

目前我正在创建一个带有图片的网页，我会喜欢自适应渲染。我希望我的最后4张图像能够在保持其大小的同时居中。

Answer 1

在响应中添加display:block和margin: 0 auto img标记可以正常工作，添加max-width:100%会在图片大一点时调整图片大小。

＆＃13;

#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;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

}

＆＃13;

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

＆＃13;

响应式图像不会调整大小

1 个答案: