0

I am making a web-site. There is content part with specific width. Inside there are flex-boxes with image. The number of images may be different (not more than 5) and the width of each image must be calculated to fit them all.

The strange thing is that in FireFox this work fine, but in Chrome or Yandex.

Seem, that images don't auto-fit in flex-box, because of height: 400px; the width: 100% tries to correspond that 400px height.

Here is HTML and CSS parts:

HTML

<div class="article-images">
    <img src="../images/newsImages/img_6_4.jpg" class="article-images-item" />
    <img src="../images/newsImages/img_6_5.jpg" class="article-images-item" />
    <img src="../images/newsImages/img_6_6.jpg" class="article-images-item" />
    <img src="../images/newsImages/img_6_9.jpg" class="article-images-item" />
</div>

CSS

.article-images {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly; 
    gap: 20px; 
    width: 100%
}
.article-images-item {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 2px;
    cursor: pointer
}

How it should be (current in FireFox):

How should be

How it looks now (in Chrome or other browser)

How it looks n

1 Answers1

0

The following example should help solve it (though we didn't use object-fit in this example). You can optionally set it up without the image DIV's: stack post

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  background-color: rgb(0,150,255);
  align-items: stretch;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 200px; /*--control image size--*/
  margin: 5px;
  border: 2px solid #fff;
  border-radius: 7px;
}

img {
  width: 100%; 
  height:auto; 
  border-radius: 5px; 
  cursor: pointer; 
  display: block; 
  margin-left: auto; 
  margin-right: auto;
}
#outer {padding:2px;}
<div id="outer">
<div class="flex-container">
    <div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=1"></div>
    <div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=2"></div>
    <div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=3"></div>
    <div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=4"></div>
</div> 
</div>
granite
  • 304
  • 4