Блог

Главная - Вопросы по программированию - Как мне выровнять изображения разного размера

Как мне выровнять изображения разного размера

#php #html #css #image #alignment

#php #HTML #css #изображение #выравнивание

Вопрос:

Я пытаюсь написать страницу с изображениями разного размера, но не могу понять, как их правильно выровнять. Вот как выглядит веб-страница:https://i.imgur.com/Li17CMl.jpg

Я добавил загрузочную img-жидкость для быстрого реагирования. Если я установлю фиксированную высоту, изображения не будут уменьшаться должным образом на экранах меньшего размера.

Я очистил некоторые не связанные данные с помощью ‘…’, просто чтобы сделать код более чистым. Мой текущий код:

     foreach(row...) : ?>
    <div class="col-md-6" style="padding...">

      <div class="card">
        <div class="card-body" style="padding...">

          <a href="">
            <div>
              <img class="img-fluid" style="width: 100%;" src="row->image..." alt="">
            </div>
            <div>
              <h5> title </h1>
              <h6> date </h6>
            </div>
          </a>

        </div> <!-- /card body -->
      </div> <!-- /card -->

    </div> <!-- /col-6 -->
    <?php endforeach; ?>

Я надеюсь, что изображения будут уменьшаться на экранах меньшего размера.

Комментарии:

1. Попробуйте минимальную высоту изображения

2. Это php-код. Пожалуйста, добавьте тег PHP

3. @MMJM хотя код в вопросе является фрагментом php, вопрос не имеет ничего общего с php.

Ответ №1:

TL: DR object-fit: cover; сделает свое дело.

Решение 1 — ФИКСИРОВАННАЯ ВЫСОТА

с помощью этого решения вы должны установить значение для высоты изображений: фотографии не будут растягиваться, но соотношение будет разным для каждого экрана

 .img-fluid {
   height: 200px; /* insert here your desired height*/
   object-fit:cover;
}

Решение 2 — РЕАЛЬНАЯ ЖИДКОСТЬ

это решение немного сложнее, но фотографии всегда будут иметь то соотношение, которое вы выберете.

 .card-body a div:first-child {
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/ 
}

.img-fluid {
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
   object-fit: cover;
}

Ответ №2:

Пожалуйста, используйте приведенный ниже код:

 .img-card img{width:100%;height:300px;object-fit:cover;}
.img-card{margin-bottom:15px;margin-top:15px;}  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
<div class="row">
  <div class="col-6">
    <div class="img-card">
      <img src="https://i.ytimg.com/vi/VDNd4KjELkU/maxresdefault.jpg" />
    </div>
  </div>
    <div class="col-6">
    <div class="img-card">
      <img src="https://media-cdn.tripadvisor.com/media/photo-s/0f/5e/fc/f5/inkaya-cinari.jpg" />
    </div>
  </div>
    <div class="col-6">
    <div class="img-card">
      <img src="https://thumbs.dreamstime.com/z/scenery-5680647.jpg" />
    </div>
  </div>
    <div class="col-6">
    <div class="img-card">
      <img src="https://cdn.pixabay.com/photo/2015/11/11/03/47/evening-1038148__340.jpg" />
    </div>
  </div>
</div>
</div>