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

【问题标题】：How to make large size(large resolution) images fit to every screen size,How to avoid it going beyond the screen如何使大尺寸（大分辨率）图像适合每个屏幕尺寸，如何避免它超出屏幕
【发布时间】：2018-06-03 10:57:48
【问题描述】：

我正在为 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 设计的，我无法更改尺寸。

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

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

我希望图像能够适应所有屏幕以及 iPad，方法是为包装类提供 100% 的宽度和高度，这样即使在 iPad 的纵向模式下，我也可以在没有任何波动的情况下查看它。请告诉我如何实现这一目标。

谢谢

【问题讨论】：

你使用DIV而不是<img>标签有什么原因吗？
不，不会有任何内容覆盖任何图像。我有 2 个图像，一个在一个下方，后面有一个文本，大约 8 个字，字体大小为 60。有人告诉我放任何div标签中的内容。有什么特别的原因吗？？
根据您的回复，我会使用 <img> 标签然后，请参阅下面的答案。这可能有点语义，但对我来说，将图像放入 <div> (<div><img></div>) 与将图像设置为 <div> 的背景不同。很多时候，您的内容将被放置在 <div> 内，但它们几乎可以放置在任何标签内。
感谢flr的回复。我还有几个问题，如果想放置大图像，比如400x400的大小，大约10个图像并排放置，并让它们适应每个屏幕尺寸？整经机的宽度和高度应该是多少？因为我希望背景是黑色的。如果你能显示html和css部分会很好。
我不确定你建议的布局是什么样的。

标签： html css ipad

【解决方案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% 宽度和比例。 p>

如果您想使用 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% 您正在寻找的，因为很难说出正确的背景和最终目标是什么。

【讨论】：

【解决方案2】：

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

【讨论】：

我只想要 3 张大尺寸的图片放在彼此下方，并在它适应屏幕尺寸后有一个大文字

【解决方案3】：

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

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

content="width=device-width" 会自动调整屏幕分辨率'initial-scale'值用于设置页面的缩放级别。

【讨论】：

【解决方案4】：

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

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

我将完全删除像素大小，并将其设置为 100% 的宽度和高度，位置为 Absolute 以便能够在其上放置其他内容。

【讨论】：

这似乎是部分答案。设置 100% 宽度和 100% 高度似乎没有帮助。也不确定绝对定位在哪里。如果您将图像设置为背景，为什么不将内容放在该元素中？您能否提供一个工作示例，因为我已经尝试过您的建议并且没有取得任何成功（jsfiddle.net/rwzn2db6）。我完全同意你关于 DigitalDouble 的回答是有效的。
link 你不会在 JS Fiddle 中看到 100% 的工作，因为它在 iframe 中......另一个解决方案 - 如果你需要图像在浏览器之间保持纵横比，则使用百分比他们的高度...假设 300+400=700 - ipad 屏幕宽度 - 100/700 = 0.1428571428571429
jsFiddle 上的 iframe 不是问题。实现有问题，jsfiddle.net/rwzn2db6/14。图像宽度也需要响应。你不需要为块级元素设置width: 100%;，它们已经占据了 100% 的宽度。