我有一个布局,利用flex来保存不同大小的图像。 但是,当我在Firefox中调整浏览器大小时,图像无法均匀缩放。
我已经阅读了很多关于导致问题的帖子,但是我很难在信息海洋中找到适合我特定场景的解决方案。有人有什么想法吗?
firefox中发生休息的图片。
*{box-sizing: border-box;}
.container{
max-width: 1360px;
margin: 0 auto;
}
img{
border:2px solid white;
}
.flex-row {
justify-content: flex-start;
align-items: flex-start;
width: 100%;
display: flex;
flex-direction: row;
}
.flex-column{
align-items: flex-start;
height: 100%;
max-width: 1360px;
display: flex;
flex-direction: column;
}
@media (max-width: 600px) {
.flex-column, .flex-row{
display: block;
}
img{
width: 100%;
}
}
<div class="container">
<div class="flex-row row">
<div class="flex-column">
<div><img src="https://placehold.it/548x227"></div>
<div><img src="https://placehold.it/548x459"></div>
</div>
<div class="flex-column">
<div class="flex-row">
<div><img src="https://placehold.it/812x459"></div>
</div>
<div class="flex-row bug">
<div><img src="https://placehold.it/406x227"></div>
<div><img src="https://placehold.it/406x227"></div>
</div>
</div>
</div>
<div class="flex-row row">
<div><img src="https://placehold.it/812x459"></div>
<div><img src="https://placehold.it/548x459"></div>
</div>
</div>
答案 0 :(得分:1)
我很确定firefox的flex-box被淘汰了。列似乎无法正常工作。
尽管如此,您可以使用float
属性实现相同的功能。然而,它花了比我预期更多的代码。
潜在的问题是很多元素都有固定的高度。正如我之前提到的,这样做的另一个问题是图像将被裁剪。 (注意ikea和cheerio标志。这是因为它们的宽度远远大于它们的高度。)
body {
margin: 0;
}
#container {
width: 75vw;
height: 1145px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#row-one {
width: 75vw;
display: block;
}
#left-column {
width: 40.294117647058823529411764705882%;
height: 686px;
float: left;
display: flex;
flex-direction: column;
}
#top-left-image {
width: 100%;
height: 227px;
background: url('https://i.ytimg.com/vi/cNGG2SswaKo/maxresdefault.jpg') center/cover;
}
#middle-left-image {
width: 100%;
height: 459px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/8b/da/34/8bda3460f271a77a54b4cfc08583b1fc.jpg') center/cover;
}
#right-column {
width: 59.705882352941176470588235294118%;
height: 686px;
float: right;
display: flex;
flex-direction: column;
}
#top-right-image {
width: 100%;
height: 459px;
background: url('http://cdn.designcrowd.com.s3.amazonaws.com/blog/Famous-Purple-Logos/1-famous-purple-logos.png') center/cover;
}
#right-column-row {
width: 100%;
}
#middle-middle-image {
width: 50%;
height: 227px;
float: left;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/1024px-Ikea_logo.svg.png') center/cover;
}
#middle-right-image {
width: 50%;
height: 227px;
float: right;
background: url('https://s-media-cache-ak0.pinimg.com/originals/f9/bd/c8/f9bdc85df698cd33535f3517659b9c03.jpg') center/cover;
}
#row-two {
width: 75vw;
height: 459px;
display: block;
}
#bottom-left-image {
width: 59.705882352941176470588235294118%;
height: 459px;
float: left;
background: url('http://logok.org/wp-content/uploads/2014/11/Sprite-logo-2014.png') center/cover;
}
#bottom-right-image {
width: 40.294117647058823529411764705882%;
height: 459px;
float: right;
background: url('https://s-media-cache-ak0.pinimg.com/736x/58/6f/a9/586fa96b662feb46fd10d179a3f5308d.jpg') center/cover;
}
@media screen and (max-width: 768px) {
#left-column, #right-column, #right-column-row, #bottom-left-image, #bottom-right-image {
width: 100%;
float: none;
}
.some-images {
width: 100%;
}
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="a.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<div id="container">
<div id="row-one">
<div id="left-column">
<div class="not-all-images" id="top-left-image"></div>
<div class="not-all-images" id="middle-left-image"></div>
</div>
<div id="right-column">
<div class="not-all-images" id="top-right-image"></div>
<div id="right-column-row">
<div id="middle-middle-image"></div>
<div id="middle-right-image"></div>
</div>
</div>
<div>
<div id="row-two">
<div class="not-all-images" id="bottom-left-image"></div>
<div class="not-all-images" id="bottom-right-image"></div>
</div>
</div>
</body>
</html>