如何将图像设置为背景，而没有背景图像属性？

我有一个块内的图像。图像占用了我屏幕宽度的100%。父块的高度为500px，屏幕宽度也为100%。我已将overflow: hidden设置为父块，因此我只能查看高度上第一个500像素的图像。如何将图像设置为背景，而没有背景图像属性？

现在，我的问题是，当我调整浏览器的窗口大小时，我需要将图像精确地缩放为背景。由于性能问题（回流等），我无法使用背景图像。

我做了这个fiddle。我怎样才能使第二个图像的第一个图像相同的反应？请注意，在我的情况下，图像具有随机分辨率。

谢谢你的帮助！如果解决方案需要使用JS/jQuery，那没关系。

来源

2013-07-11 DrSAS

http://jsfiddle.net/d5xDz/1/？ – rorypicko

你好@RoryPickering！谢谢你的回答，但如果你调整窗口大小，你会看到红色，第一块有另一个反应。 – DrSAS

我不完全理解这个问题，为什么你的原始jsfiddle不够好？与背景图像：封面？为什么你必须使用img标签？ – rorypicko

您需要在您的img上设置min-width和min-height。这将需要与你的包装成比例。所以对于小提琴例如，具有1024/768图像尺寸，它是作为this fiddle shows：

min-width: 333.33px; /* the ratio of height of img to height of wrapper applied to img width */ 
min-height: 250px; /* the height setting of the wrapper */

来源

2013-07-11 15:31:40 ScottS

这对我有用！谢谢！如果你能帮助我两个，我还有另一个问题！不管怎么说，还是要谢谢你！ http://stackoverflow.com/questions/17438452/css-set-relative-position-to-an-image-inside-a-block – DrSAS

如何将图像设置为背景，而没有背景图像属性？

回答

相关问题