html - 如何使大尺寸(高分辨率)图像适合所有屏幕尺寸，如何避免它超出屏幕

Question

我正在专门为 iPad Air 和 iPad Mini 制作一些 HTML 页面。这些页面将有一些大图像，例如 1600x300 的大小。但是根据我编写的代码，图像太大而无法显示在屏幕上，在 Windows 浏览器中测试时它超出了屏幕。代码如下所示:

<div class="wrapper">
    <div class="image1"></div>
    <div class="image2"></div>
</div>

.wrapper {
    width: 100%;
    height: 100%
}
.image1 {
    width: 1600px;
    height: 300px;
    top: 100px;
    left: 100px
}
.image2 {
    width: 1700px;
    height: 300px;
    top: 450px;
    left: 100px
}

div 的宽度和高度设置为与图像的宽度和高度相同。图片尺寸专为 iPad 设计，我无法更改尺寸。

如果我为 .wrapper 提供 iPad 的实际分辨率，如下所示，当我测试浏览器并将屏幕尺寸设置为 1024x768(iPad 的逻辑分辨率)时，图像将正确定位。

.wrapper {
    width: 2048px;
    height: 1536px
}

我希望图像通过为包装类提供 100% 的宽度和高度来适应所有屏幕以及 iPad，这样即使在 iPad 的纵向模式下我也可以毫无波动地查看它。请告诉我如何实现这一目标。

谢谢

Answer 1

OP 没有阐明他们使用 DIV 的原因。也许会有内容覆盖它？在 OP 提供说明之前，我将提供标准的响应式图像解决方案。

如果你不必使用 DIV，试试这个:

<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">

img {
    display: block;
    max-width: 100%;
}

jsFiddle:http://jsfiddle.net/rwzn2db6/

更新

注意:我无法判断您是否也在寻找 100% 高度选项，或者只需要宽度为 100% 宽度和比例。

如果您想使用 DIV，可以使用 background-size: cover以及每个图像 DIV 的适当数量的 padding-bottom。 DIV 底部的填充基于以百分比表示的图像的高宽比。

<div class="container">
    <div class="img-1"></div>
    <div class="img-2"></div>
</div>

.container > div {
    background-size: contain;
}
.img-1 {
    background: url('http://placehold.it/1600x300/') no-repeat;
    padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */ 
}
.img-2 {
    background: url('http://placehold.it/1600x300') no-repeat;
    padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}

jsFiddle:http://jsfiddle.net/5kjtdhmn/

上面提供的任何一个解决方案都可能不是您正在寻找的 100%，因为很难说出正确的上下文和最终目标是什么。