Блог

Главная - Вопросы по программированию - Как мне поместить тег привязки (содержащий изображение) в ячейку сетки начальной загрузки?

Как мне поместить тег привязки (содержащий изображение) в ячейку сетки начальной загрузки?

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

У меня есть сетка из 9 ячеек, содержащая изображения (с использованием столбцов начальной загрузки). Сетка работает нормально и реагирует, когда она содержит только изображения. Однако моя цель — сделать изображения интерактивными, поэтому я поместил <img> тег внутри тега привязки <a> , что привело к тому, что фотографии оказались не в порядке сетки.

Когда я нажал на «Проверить» в Chrome, он показал <a> большой контейнер с <img> центром внутри него. Как мне заставить <a> элемент соответствовать размерам столбцов начальной загрузки?

HTML: 

 <div class="container">
  <div class="row">
      <a href="#">
          <img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
      </a>
      <a href="#">
          <img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
      </a>
      <a href="#">
          <img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
      </a>
  </div>
</div>

CSS: 

 .gallery-photo {
 object-fit: cover;
 height: 300px;
 margin: 1% 0;
 }

Ответ №1:

Предполагается, что столбцы должны располагаться непосредственно внутри строки.

Итак, это должно выглядеть примерно так. 

 <div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://" alt="something">
            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://" alt="something">
            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://" alt="something">
            </a>
        </div>
    </div>
</div>

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

1. Привет! Я думаю, что я пробовал это раньше. Хотя изображения не превышают указанную высоту, кажется, что они выходят за пределы столбцов, таким образом, не формируя сетку.

2. Вы должны установить ширину для изображений.. Попробуйте использовать width, установив высоту на auto и ширину на 100%

Ответ №2:

Попробуйте добавить столбцы начальной загрузки в a тег, а не в img .

 <div class="container">
  <div class="row">
      <a class="col-md-6 col-lg-4" href="#">
          <img class="gallery-photo" src="https://" alt="something">
      </a>
      <a class="col-md-6 col-lg-4" href="#">
          <img class="gallery-photo" src="https://" alt="something">
      </a>
      <a class="col-md-6 col-lg-4" href="#">
          <img class="gallery-photo" src="https://" alt="something">
      </a>
  </div>
</div>

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

1. Здравствуйте, я думаю, что я пробовал это раньше. Хотя изображения не превышают указанную высоту, кажется, что они выходят за пределы столбцов, таким образом, не формируя сетку. Как вы думаете, есть ли свойства, которые я могу применить к элементу привязки в css с помощью !important (чтобы переопределить свойства начальной загрузки по умолчанию для ссылок привязки)?

Ответ №3:

Столбцы начальной загрузки должны располагаться непосредственно внутри строки.

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

Кроме того, вы должны поместить width: 100% на свои изображения для объектной подгонки, чтобы они работали так, как вы хотите.

 .gallery-photo {
   object-fit: cover;
   width: 100%;
   height: 300px;
   margin: 1% 0;
 }  
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
            </a>
        </div>
    </div>
</div>

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

1. вау, это сработало! Я пробовал width: 100% раньше, но не тогда, когда я помещал элементы привязки и изображения в div. Большое вам спасибо! Это сработало!!!

2. @HaleyA Да, я обнаружил, что в отличие от других HTML-элементов, которые будут ограничиваться шириной своего родительского элемента, если вы не укажете большую ширину, изображения имеют уникальную тенденцию отображаться с их собственной шириной (даже если она больше родительского контейнера), если вы не укажете width: 100% или max-width: 100%