个人中心
gpt4 book ai didi

html - 响应时将图像置于 div 标签的中心

转载 作者：太空宇宙 更新时间：2023-11-03 21:04:21 24 4
gpt4 key购买 nike

我想在网页上显示一张图片。图片足够长，高度固定。因此，当有人通过减小屏幕尺寸来检查响应能力时，它应该从该 div 中移除额外的尺寸(这正在发生)。

我不知 Prop 体的术语。所以，我会试着解释一下。它应该从中心点显示。如果图像是“abcdefgh”。假设'a','b'...都是网格数。屏幕尺寸相对一半时的默认行为是“abcd”，但我想显示“cdef”。

我给出了 overflow: hidden 以从 div 中删除额外的图像。我试过 margin-left，margin-right 都是自动的。但是，仅当图像小于 div 大小时才需要。

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>
<html>
  <body>
    <div style="border:4px solid black; height:200px;overflow:hidden;text-align:center;">
    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris" style="width:100%;height:200px;">
    </div>
    
  </body>
</html>

最佳答案

您可以添加 object-fit: cover 以响应式地“裁剪”图像

关于html - 响应时将图像置于 div 标签的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55449347/

24 4 0
文章推荐： python - 如何有效地将多个函数应用于数据框？
文章推荐： OpenCV 在 Windows 中的安装
文章推荐： python - 调用CopyObject操作时NoSuchBucket
文章推荐： opencv - 使用 OpenCV + OpenSLAM 创建语义 map ？