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
}

我希望图像能够适应所有屏幕以及iPad，为包装类提供100％的宽度和高度，这样即使在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，则可以为每个图像DIV使用background-size: cover以及相应数量的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％，因为很难说出正确的背景和最终目标是什么。

Answer 2

将max-width: 100%和height:auto添加到您的图片

Answer 3

您可能需要根据设备调整页面的大小（宽度 - 高度），因此您可能需要在HTML的部分添加以下标记。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......

content =“width = device-width”会自动调整屏幕分辨率'初始缩放'值，用于设置页面的缩放级别。

Answer 4

首先，人们说什么不是答案？特别是什么时候？ WTF。

其次，除了DigitalDouble已经说过的话之外，另一个可接受的答案是将图像设置为具有背景尺寸：盖;并使用css background-image属性设置图像。

我会删除像素大小，只需将其设置为100％宽度和高度，位置绝对可以在其上放置其他内容。

如何使大尺寸（大分辨率）图像适合每个屏幕尺寸，如何避免它超出屏幕

4 个答案: