我正在将各种尺寸和尺寸的图像加载到我的网站中。Chrome、Opera 和 Safari 都可以拉伸图像,使其看起来不会不自然地拉伸或倾斜。Firefox 保留原始图像的宽度并将图像高度设置为 100px。这会产生和50x100
图像。
在左侧您可以看到 Chrome,在右侧您可以看到 Firefox。我希望所有图像的高度都为 100 像素。150x100
2000x100
图像类看起来像这样
img.image-message {
padding-bottom: 2px;
height: auto;
width: auto;
max-height: 100px;
max-width: 100%;
}
仅设置height
并且width
不会改变任何事情:
img.image-message {
padding-bottom: 2px;
height: 100px;
width: auto;
}
在metahill.com查看实时示例。您可以使用此用户登录:
Username: test_t
Password: meta_hill_t