按给定比例更改HTML占位符图片的宽度和高度
按给定比例更改HTML占位符图片的宽度和高度
提问于 2014-11-14 18:08:33
我有一张占位符图片，而且我知道真实图片的大小。
例如，我的占位符图片是30x30，我的真实图片是1200*800。但我的屏幕只有600px宽。
我给出了具有真实尺寸的图像，如下所示
<img src="abc.png" width="1200px" height="800px"/>但是这个尺寸比我的屏幕尺寸600px还要宽。所以我像下面这样添加了一个css
img {
max-width:100%;
height: auto;
}结果是图片将显示为600x600的大小。如果我删除height:auto，它将显示为600x800。
我希望它显示为600x400，与真实图片的比例相等。我该怎么做呢？使用JQuery是可以的。
回答 4
Stack Overflow用户
发布于 2014-11-14 18:14:09
html
<img src="abc.png"/>和css
img {
width:600px;
height: 400px;
max-width:100%;
max-height:100%;
}不需要jquery。
Stack Overflow用户
发布于 2014-11-14 18:16:17
占位符必须与原始图像具有相同的宽/高比。如果它有其他比例，你应该使用JavaScript，并将原始图片比例存储在某个变量中。然后，使用这些信息设置max-width和max-height属性(甚至是width和height)的值。
但是，如果您知道图像的宽度和高度，那么您可以在CSS中设置静态值。如下所示：
img {
max-width: 600px;
max-height: 400px;
}Stack Overflow用户
发布于 2014-11-14 18:37:03
不可能有一个具有设定纵横比的静态占位符来包含具有动态比率的图像。
示例：如果占位符是600X400，则表示宽高比为3:2，只有宽高比为3:2的图像才能完美适合此示例: 1200X800,900:600
因此，如果您有标记<img src="" height="100px" width="400px">，它将适用于上述尺寸为1:4的图像。但如果图像类似于800*800，它将被流式传输和倾斜。
我建议使用以下标记
HTML
<img src="your src file"/>CSS
img
{
width:600px;
height:auto;
}这将使图像零售其原始尺寸
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26927466
复制相关文章
相似问题
腾讯云开发者
