HTML中的不同比例图像

时间:2014-05-02 12:21:02

标签: html css web responsive-design media-queries

我有一张比例为16:9的图像,我需要在网站上使用它。在其中一个页面上,我显示的产品列表的图像比例为340x265,当用户点击该项目时,该产品页面应以400x200的比例查看相同的图像。所以问题是,因为如果定量差异图像可以拉长。 我是html的新手,处理这个问题的正确方法是什么?

1 个答案:

答案 0 :(得分:0)

最快的css解决方案是为图像的容器div提供宽度/高度,并将图像添加为此div的background-image。 然后使用backround-position:center;&该容器background-size:cover;。这样可以在不丢失宽高比的情况下拉伸图像。

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