html - 如何将图像的高度设置为与其宽度相同?
问题描述
如何将图像的高度设置为与其宽度相同?
图像的高度始终需要与其宽度相同,即使图像的宽度由于浏览器窗口大小的调整而发生变化。
为了进一步解释,如果图像的宽度为 500 像素,那么其高度也需要为 500 像素。如果窗口调整大小并且图像的宽度更改为 600 像素,则其高度也需要更改为 600 像素。
约束:请不要在网格或图像上设置固定宽度。
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
img {
width: 100%;
object-fit: cover;
}
<div class="grid">
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-1.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-2.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-3.jpg"/>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-4.jpg"/>
</div>
解决方案
div
为每个图像添加一个容器,将其设置height
为 0,并将其设置padding-bottom
为 100% 作为其自身宽度的百分比:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div{
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<div>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-1.jpg"/>
</div>
<div>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-2.jpg"/>
</div>
<div>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-3.jpg"/>
</div>
<div>
<img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-4.jpg"/>
</div>
</div>
推荐阅读
- javascript - JS 参数与参数
- javascript - javascript中的WAP在每个空白处插入新行
- django - 从网站地理封锁用户的最简单方法是什么?
- vb.net - VB.NET 的 FirstOrDefaultDynamic 使用示例
- javascript - ExtJS - 在哪里放置新插件?
- ansible - 集合的 Ansible 角色依赖处理
- java - 如何使用 Java SDK 检查 Azure Cosmos DB 客户端连接是否成功?
- android - 使用 Jetpack Compose Navigation 管理可组合函数
- flutter - 在颤动的图像上应用动画
- javascript - 如何使用新数据 JS 更新 ion-nav