Fatal编程技术网
  • html/
  • Html 并排响应图像，无回流

Html 并排响应图像，无回流

html css

Html 并排响应图像，无回流,html,css,reflow,Html,Css,Reflow,希望在加载图像时，在不让浏览器回流屏幕的情况下显示2个响应图像。我目前正在使用此答案的修改版本： 以下是一张响应图像的提琴： HTML 注意：我使用一些内联样式是因为我使用Razor为图像创建HTML，并设置宽度、高度和高度/宽度（底部填充%） 我现在试图得到两个不同的高度图像显示并排，同时保留我已经有工作。具体而言： 并排显示不同高度的图像 图像在其父div中居中 图像显示不大于100% 如果显示器的宽度减小到小于两个图像中任何一个的宽度，则使这两个图像垂直堆叠 如果显示进一步缩小，则根据需

希望在加载图像时，在不让浏览器回流屏幕的情况下显示2个响应图像。我目前正在使用此答案的修改版本：

以下是一张响应图像的提琴：

HTML

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

我现在试图得到两个不同的高度图像显示并排，同时保留我已经有工作。具体而言：

  • 并排显示不同高度的图像
  • 图像在其父div中居中
  • 图像显示不大于100%
  • 如果显示器的宽度减小到小于两个图像中任何一个的宽度，则使这两个图像垂直堆叠
  • 如果显示进一步缩小，则根据需要缩小图像的宽度，同时保留宽高比-标准响应用户界面
  • 打印时，不要将图像拆分为多页，无论是一行中的两个图像还是一个图像，但也不要要求两个图像在不同的行中同时拆分为一页
  • 加载HTML时，根据显示器的宽度和宽高比为每个图像保留垂直空间-防止回流
演示： 中高音： HTML/CSS 

html{框大小：边框框；字体：700 16px/1.5控制台；}
*，*：之前，*：之后{框大小：继承；边距：0；填充：0；边框：0；}
.flexWrapper{margin:2em auto；最大宽度：38em；内部分页符：避免；显示：flex；flex方向：行；对齐内容：中心；}
.flex{width:-moz-fit内容；width:-webkit-fit内容；width:fit内容；height:-moz-fit内容；height:-webkit-fit内容；height:fit内容；溢出：无；轮廓：3px纯红色；flex:0 1自动；}
.exampleImg0、.exampleImg1{最大高度：20em；宽度：100%；高度：100%；显示：块；}
@媒体屏幕和屏幕（最大宽度：37em）{
.flexWrapper{flex方向：列；对齐项：中心；}
}
进行了基本的更改，例如：

  • 包括
    边距
    、
    填充
    和
    边框

  • 字体大小
    在

    只是在晚上，为了测量目的、定位等，一切都是如何进行的

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

  • .image包装器
    <代码>.flexWrapper

  • .image wrapper``div
    .flex

  • .image wrapper``div
    img
    <代码>示例IMG0（原始img） 及 
    。示例img1
    （添加img）

简要说明：

  • .flexWrapper`{display:flex；flex-direction:row；justify-content:center；..
    请参见`

  • .flex
    {width:-moz-fit内容；width:-webkit-fit内容；width:fit内容；height:-moz-fit内容；height:-webkit-fit内容；height:fit内容；溢出：无；
    …请参阅 …
    outline:3px纯红；
    只是为了更好地查看flex项目。。。 …
    flex:0 1 auto；}
    这允许包装IMG的2个div（.flex）在您建立的标准范围内运行

  • .exampleImg0、.exampleImg1
    {最大高度：20em；宽度：100%；
高度：100%；显示：block；}
    这些属性有助于imgs 以其父级
    .flex
    为中心，保持响应率

  • 一个简单的媒体查询…
    @媒体屏幕和（最大宽度：37em）{
.flexWrapper{flex方向：列；对齐项：中心；}
}
    …因此，每当图像收缩时，它们都会叠在一起

更新：对于上面的第四个项目符号，“如果显示器宽度减小到小于两个图像中任何一个的宽度，则将这两个图像垂直堆叠”，意思是“如果宽度减小到小于两个图像的宽度”谢谢，我今晚会看这个。好的。我不知道flex的逻辑。我想我用不同高度的图像得到了它，并且通过使用flex-wrap:wrap避免了媒体查询。 
<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>

.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%;
}

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