并排响应图像 w/o 回流
Side by Side Responsive Images w/o Reflow
想要显示 2 个响应式图像,而浏览器不会在加载图像时重排屏幕。我目前正在使用此答案的修改版本:responsive-design, image, how to set width/height to avoid reflow on image-load
这是单个响应式图片的 fiddle: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 并设置宽度、高度和 height/width(底部填充 %) .
我现在正在尝试并排显示 2 个不同高度的图像,同时保留我已经工作的内容。具体来说:
- 并排显示不同高度的图像
- 图像以其父图像为中心 div
- 图像显示不大于 100%
- 如果显示宽度减小到小于 2 个图像中任何一个的宽度,则让这 2 个图像垂直堆叠
- 如果显示进一步缩小,请根据需要缩小图像宽度,同时保持 width:height 比例 - 标准响应式 UI
- 打印时,不要将图像分页,无论是两张图像还是一张,但不要求两张图像放在不同的行时不会分页
- 加载 HTML 时,根据显示宽度和 width/height 比例为每个图像保留垂直 space - 防止回流
演示版:jsFiddle
替代:Full Screen
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>
进行了根本性的更改,例如:
reset,共 margin
、padding
和 border
font-size
声明于root
只是为了晚上了解一切在测量、定位等方面的表现...
重命名 元素(我需要使用奇怪的名称来更好地关联事物)
.image-wrapper
....... .flexWrapper
.image-wrapper``div
………….flex
.image-wrapper``div
img
... .exampleImg0
(原图)
和
.exampleImg1
(添加了 img)
简要说明:
.flexWrapper``{ display: flex; flex-direction: row; justify-content: center;...
见this`
.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; }
这允许包装 img 的 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; }
}
...所以每当图像缩小时,它们就会堆叠在一起。
想要显示 2 个响应式图像,而浏览器不会在加载图像时重排屏幕。我目前正在使用此答案的修改版本:responsive-design, image, how to set width/height to avoid reflow on image-load
这是单个响应式图片的 fiddle: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 并设置宽度、高度和 height/width(底部填充 %) .
我现在正在尝试并排显示 2 个不同高度的图像,同时保留我已经工作的内容。具体来说:
- 并排显示不同高度的图像
- 图像以其父图像为中心 div
- 图像显示不大于 100%
- 如果显示宽度减小到小于 2 个图像中任何一个的宽度,则让这 2 个图像垂直堆叠
- 如果显示进一步缩小,请根据需要缩小图像宽度,同时保持 width:height 比例 - 标准响应式 UI
- 打印时,不要将图像分页,无论是两张图像还是一张,但不要求两张图像放在不同的行时不会分页
- 加载 HTML 时,根据显示宽度和 width/height 比例为每个图像保留垂直 space - 防止回流
演示版:jsFiddle
替代:Full Screen
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>
进行了根本性的更改,例如:
reset,共
margin
、padding
和border
font-size
声明于root
只是为了晚上了解一切在测量、定位等方面的表现...
重命名 元素(我需要使用奇怪的名称来更好地关联事物)
.image-wrapper
........flexWrapper
.image-wrapper``div
………….flex
.image-wrapper``div
img
....exampleImg0
(原图) 和.exampleImg1
(添加了 img)
简要说明:
.flexWrapper``{ display: flex; flex-direction: row; justify-content: center;...
见this`.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; }
这允许包装 img 的 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; } }
...所以每当图像缩小时,它们就会堆叠在一起。