如何使用 HTML 和 CSS 格式化图像

Question

#r_s_ad {
width: 12.5%;
height: 40%;
background: #FFF;
position: absolute;
top: 20%;
right: 0.2%;
margin: 0%;
padding: 0%;
}
#r_s_ad img {
width: 560%;
height: 150%;
margin: 0%;
padding: 0%;
}

<div id=r_s_ad>
<div id="l_s_ad">
<img src="snetimages/Bop.png" alt="Birds of Prey film poster">
<img src="snetimages/it.png" alt="It chapter 2 film poster">
</div>
</div>

我尝试使用 top 属性尝试格式化图像，但它不起作用。 这是我为我的大学作业做的电影网站的一部分。我希望它位于div 标签的顶部，但它被保留但出于某种原因。

Answer 1

当您说格式时，我认为您指的是缩放图像以适应目标空间。

我在嵌套的div 中将 id=l_s_ad 更改为类 =l_s_ad。 我在 css 中定义了该类。

然后，我将该类也应用于图像标记。 *(出于某种原因，如果我从父容器或任何 img 标签中省略该类，它对我不起作用。不知道为什么。

[CSS]

.l_s_ad {
width: 100%;
min-height: 40%;
}

[网页]

<div id="r_s_ad">
<div class="l_s_ad">
<img class="l_s_ad" src="a.jpg" alt="">
<img class="l_s_ad" src="b.jpg" alt="">
</div>
</div>

Answer 2

请提供有关如何设置图像格式的更多信息。 如果您想显示大图像，我不建议您的父div 具有绝对位置或宽度为 12.5%。此外，img 宽度和高度不应超过 100%。请在下面的代码片段中使用这些值。希望有帮助。

#r_s_ad{
width: 100%;
height: 40%;
background:#FFF;
/*position: absolute;*/
top:20%;
right:0.2%;
margin:0%;
padding:0%;
}
#r_s_ad img{
width:100%;
height:100%;
margin:0%;
padding:0%;
}

<div id=r_s_ad>
<div id="l_s_ad">
<img src="https://source.unsplash.com/random" alt="Birds of Prey film poster">
<img src="https://source.unsplash.com/random" alt="It chapter 2 film poster">
</div>
</div>