gpt4 book ai didi

html - HTML 中的不同比例图像

转载 作者:行者123 更新时间:2023-11-28 10:33:38 30 4
gpt4 key购买 nike

我有一张比例为 16:9 的图片,我需要在网站上使用它。在其中一个页面上,我显示了图片比例为 340x265 的产品列表,当用户单击该元素时,它会转到该产品页面,在该页面上应该以 400x200 的比例查看相同的图片。所以问题是因为如果可以拉伸(stretch)比例差异图像。我对 html 很陌生,处理这个问题的正确方法是什么?

最佳答案

最快的纯 css 解决方案是为图像的容器 div 提供宽度/高度,并将图像添加为 background-image这个分区。然后使用 backround-position:center; & background-size:cover;对于那个容器。这将在不丢失宽高比的情况下拉伸(stretch)您的图像。

另一个解决方案,如果你想在 <img> 中使用图像标记,那么您必须使用 jQuery 动态调整图像大小以适应容器。

关于html - HTML 中的不同比例图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23428069/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com