Как предотвратить изменение высоты изображения элемента <img>? HTML и CSS - PullRequest
Новая
       11

Как предотвратить изменение высоты изображения элемента <img>? HTML и CSS

1 голос
/ 01 февраля 2020

У меня есть сетка, к которой я добавляю элементы сетки, затем, используя класс thumbnail, я предоставляю размеры тегу класса миниатюр. Проблема в том, что когда я добавляю изображение в тег <img>, оно меняет размерность по высоте. Я не хочу, чтобы это произошло, вместо этого я хотел бы остаться с измерениями, которые я дал.

Итак, у меня есть следующее поле содержимого, которое я добавляю в сетку: 

$('.content').append('<div class="grid-item"> <img class="thumbnail" src='+thumbnail+'><div class="details"><img class="profileImg" src='+profPic+'><span class="portalTitle">'+caption+'</span></div></div>');

У меня тогда есть следующее css для него: 

    .content {
      display: grid;
      grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
      /* grid-template-columns:auto auto auto; */
      /* 10fr, 10fr, 10fr, 10fr; */
      /* auto auto auto; */
      /* background-color: #2196F3; */
      padding: 5px;
      margin-top: 25px;
      margin-right: 25px;
      margin-left: 250px;
      margin-bottom: 170px;
    }

    .grid-item {
      /* background-color: rgba(255, 255, 255, 0.8); */
      /* border: 1px solid grey; */
      padding: 0px;


      /* max-width: 440px;
      min-width: 439px; */


      /* 150px */
      /* font-size: 30px; */
      /* text-align: center; */
    }
    .thumbnail {
      /* background-color: black; */
      margin-right: 5px;
      width: 95%;
      /* height: 240px; */
      height: 70%;
      border-radius: 9px;
      cursor: pointer;
    }
    /* object-fit: cover; */

    .details {
      display: inline-flex;
      /* text-align: center; */
      /* display:block; */
      /* display:table-cell;
      vertical-align:middle; */

      /* background-color: grey; */
      margin-right: 5px;
      width: 95%;
      height: 80px;
    }
    .portalTitle {
      margin-top: 25px;
      margin-left: 10px;
      /* margin: auto; */
      /* line-height: 70px; */
      font: Arial;
      font-family: sans-serif;
      font-size: 16px;
      font-weight:500;
    }
    .profileImg {
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      margin-top: 10px;
    }

Здесь это немного html: 

<div class="content">
  <!-- <div class="grid-item">
    <img class="thumbnail" src="images/testImg.png">
    <div class="details">
      <img class="profileImg" src="images/testImg.png">
      <span class="portalTitle"> Shanghai, China night sounds</span>
    </div>
  </div> -->
</div>

Обновление : Судя по тому, что я понял, высота меняется, но ширина остается то же. Как я могу это исправить? Проблема заключается в том, что если я установлю указанную высоту c вместо процента, то div будет странно растягиваться вместо правильного динамического масштабирования.

Изображение, показывающее проблему (Как вы можете видеть, div имеют разную высоту, когда я хочу, чтобы они были мне больше похожи на YouTube с одинаковой высотой и шириной) enter image description here

1 Ответ

0 голосов
/ 02 февраля 2020

Я полагаю, что вы хотите, чтобы содержимое сетки было симметричным, но здесь фотографии могут иметь переменный размер или содержание txt может отличаться.

для изображений 

.profileImg{

 min-width:5rem; 
 max-width:5rem;
 min-height:5rem; 
 max-height:5rem;

 }

примените аналогичные css для миниатюрных изображений

для текста, вы можете установить ограничение, которое вы хотите ввести, и установить минимальную высоту и min-width для его div

лично я предлагаю вам использовать bootstrap row-col вместо этого. Это также сделает ваш сайт более отзывчивым.

...