没有回流的并排响应图像

时间:2015-08-03 23:58:06

标签: html css reflow

想要显示2个响应式图像,而无需在加载图像时浏览器重新流动屏幕。我目前正在使用此答案的修改版本:responsive-design, image, how to set width/height to avoid reflow on image-load

以下是单个响应式图片的小提琴: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并设置宽度,高度和高度/宽度(底部填充%)。

我现在正试图让两个不同高度的图像并排显示,同时保留我已经工作的东西。具体做法是:

  • 不同高度的图像并排显示
  • 图片以其父div
  • 为中心
  • 图片显示不大于100%
  • 如果显示器的宽度减小到小于2个图像中任何一个的宽度,则这两个图像垂直堆叠
  • 如果显示屏进一步缩小,请根据需要缩小图像的宽度,同时保留宽度:高度比 - 标准响应式用户界面
  • 打印时,不要在页面上打破图像,无论是一行还是一行上的2张图像,但是当它们位于不同的行上时,不要求两张图像同时不打破页面
  • 加载HTML时,根据显示宽度和宽高比保留每个图像的垂直空间 - 防止重排

1 个答案:

答案 0 :(得分:1)

DEMO:jsFiddle

Alt:Full Screen

HTML / CSS

VIEW

进行了基本的更改,例如:

  • box-sizing

  • <!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> marginpaddingborder

  • font-sizereset

    宣布

    只是为了衡量一切行为的测量目的,定位等......

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

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

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

  • .image-wrapper``div img ... .exampleImg0(原创img)                                    和                               .exampleImg1(已添加img)

简要说明:

  • .flexWrapper``{ display: flex; flex-direction: row; justify-content: center;...请参阅root`

  • .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; ...请参阅this                              ...... 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; } } ...所以每当图像缩小时,它们就会叠加在一起。