1

想要显示 2 个响应式图像，而无需在加载图像时让浏览器重排屏幕。我目前正在使用此答案的修改版本：响应式设计，图像，如何设置宽度/高度以避免图像加载时回流

这是单个响应图像的小提琴：https ://jsfiddle.net/hxraak4u/

HTML

<div class="image-wrapper" style="max-width: 608px; ">
    <div style="padding-bottom: 49.34%; "> <!-- Height / Width -->
        <img src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" style="max-height: 300px;" />
    </div>
</div>

CSS

.image-wrapper {
    margin: 15px auto;
    page-break-inside: avoid;
}
.image-wrapper div {
    position: relative;
    height: 0;
    overflow: hidden;
}
.image-wrapper div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

注意：我使用一些内联样式是因为我使用 Razor 为图像创建 HTML 并设置宽度、高度和高度/宽度（底部填充百分比）。

我现在正试图让 2 个不同高度的图像并排显示，同时保留我已经工作的内容。具体来说：

  • 不同高度的图像并排显示
  • 图像以它们的父 div 为中心
  • 图像显示不大于 100%
  • 如果显示的宽度减小到小于两个图像中任何一个的宽度，则使这两个图像垂直堆叠
  • 如果显示进一步缩小，则根据需要缩小图像的宽度，同时保持宽高比 - 标准响应式 UI
  • 打印时，不要在页面上打断图像，无论是一行中的 2 个图像还是一个，但不要要求两个图像一起在不同行上时不打断页面
  • 加载 HTML 时，根据显示的宽度和宽度/高度比为每个图像保留垂直空间 - 防止回流
4

1 回答 1

1

演示：jsFiddle

Alt：全屏

HTML/CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html { box-sizing: border-box; font: 700 16px/1.5 Consolas; }

*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }

.flexWrapper { margin: 2em auto; max-width: 38em; page-break-inside: avoid; display: flex; flex-direction: row; justify-content: center; }

.flex { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; overflow: none; outline: 3px solid red; flex: 0 1 auto; }

.exampleImg0, .exampleImg1 { max-height: 20em; width: 100%; height: 100%; display: block; }

@media screen and (max-width:37em) {
  .flexWrapper { flex-direction: column; align-items: center; }
}
</style>
</head>

<body>
<div class="flexWrapper">
  <div class="flex">
    <img class="exampleImg0" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" />
  </div>
  <div class="flex">
    <img class="exampleImg1" src="http://placehold.it/240x320/fff/000.png&text=240x320" />
  </div>
</div>
</body>
</html>

进行了根本性的改变，例如：

  • box-sizing

  • , margin,padding和的重置border

  • font-size宣布在root

    只是为了晚上出去，为了测量目的、定位等，一切都是如何表现的……

重命名元素（我需要使用奇怪的名称来更好地关联事物）

  • .image-wrapper......................flexWrapper

  • .image-wrapper``div………….flex

  • .image-wrapper``div img... .exampleImg0（原始图像）和 .exampleImg1（添加图像）

简要说明：

  • .flexWrapper``{ display: flex; flex-direction: row; justify-content: center;...看到这个`

  • .flex { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; overflow: none;...看到这个 ...outline: 3px solid red;只是为了更好地查看弹性项目... ...flex: 0 1 auto; }这允许包装imgs的2个div（.flex）在您建立的标准内表现得非常好。

  • .exampleImg0, .exampleImg1 { max-height: 20em; width: 100%; height: 100%; display: block; }这些属性有助于 imgs 在其父级中居中，.flex并保持响应率。

  • 一个简单的媒体查询......@media screen and (max-width:37em) { .flexWrapper { flex-direction: column; align-items: center; } }所以每当图像缩小时，它们就会相互堆叠。

于 2015-08-04T05:14:07.490 回答