CSS изменение размера div и изображений внутри div при изменении размера окна

Question

У меня есть один div с несколькими изображениями рядом друг с другом. Допустим, у меня есть 7 подряд для этого примера.

Теперь, когда я изменяю размер браузера, мне бы хотелось, чтобы они оставались в одном ряду рядом друг с другом и соответственно меняли размеры по высоте и ширине.

Как бы я поступил об этом?

Текущий пример

<div>
    <img src=“img1.jpg” />
    <img src=“img2.jpg” />
    <img src=“img3.jpg” />
    <img src=“img4.jpg” />
    <img src=“img5.jpg” />
    <img src=“img6.jpg” />
    <img src=“img7.jpg” />
<\div>

Answer 1

Самый простой способ - превратить контейнер во flexbox (который также более широко поддерживается, чем css-grid).

  #imgs {
    display: flex;
  }
  #imgs img {
    width: 100%;
  }

  <div id="imgs">
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />    
  </div>

Answer 2

Как предложено Джоном Р ниже, вы можете использовать функцию calc из css. Другим лучшим способом может быть выполнение медиазапросов.

@media (min-width:1200px){
div{
   width:500px;
   }
 div > img{
         width:20%;
         height:auto;
         }
}

Answer 3

Попробуйте это:

div { display: grid; grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)) }
  img { width: 100%; height: auto; }

<div>
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
</div>

Пояснение:

display: grid является новейшим дополнением к методам верстки CSS и является самым элегантным. Он широко поддерживается в вечнозеленых браузерах, так что все хорошо.

grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)) находит способ вписаться в 1 фракцию от всей ширины (поэтому переменная с размером контейнера, которая, если вы поместите это на пустую страницу, также будет меняться в зависимости от размера экрана) с минимальным 1px и auto -подходит на всю ширину, каждое изображение.

width: 100% необходим, чтобы убедиться, что изображение не перекошено.

height: auto имеет ту же функцию анти-искажения, если вы хотите использовать полный тег IMG со свойствами ширины и высоты (что я полностью рекомендую из-за проблем с производительностью, если вы не создаете сайт, совместимый с HTTP / 2) или если вы случайно измените высоту, используя другой CSS.

Кстати, это работает независимо от того, сколько у вас здесь изображений , поэтому нет необходимости каждый раз менять дроби или проценты!

И последнее: когда у вас есть какие-либо списки, я бы заменил <div> на <ul> или <ol>, если бы я был вами, и выкинул бы <li> таким же образом с еще большим количеством CSS нужна магия, но гораздо более семантический DOM.

Изображение предоставлено: IMDB .

Answer 4

Быстрый и грязный способ - использовать calc и float

div img {max-width: calc(100%/7);float:left;}

<div>
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />    
</div>