Изменение размера n изображений, чтобы они соответствовали определенной высоте и ширине - правильное расположение / класс для определения свойства?

ProgramBox

Изменение размера n изображений, чтобы они соответствовали определенной высоте и ширине — правильное расположение / класс для определения свойства?

Post author:admin
Запись опубликована:8 ноября, 2022
Post category:Вопросы по программированию

#css #flexbox

Вопрос:

Я довольно новичок в CSS / HTML, и я надеюсь, что этот вопрос не слишком глуп

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

Однако я уверен, что это, вероятно, проще, чем это?

Я пытался

добавление min-width: / max-width 33,33% к классу .container.
flex-basis: 33.33%
минимальная ширина и ширина: 33,33% дюйма.изображение-категория

Почему помогло только добавление свойства к идентификатору? Я делаю что-то не так или это условность?

 .container{
display: flex;
}

.image-category{
float: left;
width: calc(100%/3);
flex-basis: 33.33%;
object-fit:cover;
background: red;
}

#product1{
max-width: calc(100%/3);
min-width: calc(100%/3);
max-height: 66%;
object-fit:cover;
}

#product2{
max-width: calc(100%/3);
min-width: calc(100%/3);
max-height: 66%;
object-fit:cover;
}

#product3{
max-width: calc(100%/3);
min-width: calc(100%/3);
max-height: 66%;
object-fit:cover;
}

 <div class="container">



        <img class"image-category" id="product1" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dmVydGljYWx8ZW58MHx8MHw=amp;ixlib=rb-1.2.1amp;w=1000amp;q=80">
        <img class"image-category" id="product2" src="https://images.pexels.com/photos/1459505/pexels-photo-1459505.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500">
        <img class"image-category" id="product3" src="https://images.pexels.com/photos/433989/pexels-photo-433989.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500">

    </div>

Развернуть фрагмент

Ответ №1:

Обычно я бы не стал давать ответ, поскольку это частично вопрос с опечаткой:

У вас опечатка в вашем HTML, вам не хватает = для вашего класса, поэтому image-category CSS не применяется.
Вам вообще не нужно float свойство. Это то, для чего flex используется.
Вы можете использовать сокращение для flex свойства (flex-grow, flex-shrink, flex-basis)
Установите максимальную ширину для вашего .image-category класса.

 .container {
  display: flex;
}

.image-category {
  max-width: 33.333%;
  flex: 0 0 33.33%;
  object-fit: cover;
  background: red;
}

 <div class="container">
  <img class="image-category" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dmVydGljYWx8ZW58MHx8MHw=amp;ixlib=rb-1.2.1amp;w=1000amp;q=80">
  <img class="image-category" src="https://images.pexels.com/photos/1459505/pexels-photo-1459505.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500">
  <img class="image-category" src="https://images.pexels.com/photos/433989/pexels-photo-433989.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500">

</div>

Развернуть фрагмент

Ответ №2:

id имеет больше specificity , чем классы. В вашем коде class не применяется из-за меньшего значения специфичности.

Если у вас есть только class , а не id в вашем коде, он все равно будет работать. Но поскольку вы использовали float свойство для выбора класса. float ведет себя по-разному в элементах HTML и выводит их из нормального потока.

ОБНОВЛЕНИЕ: у вас на самом деле есть опечатка в вашем коде. Вот почему ваш класс не применяется.

ЗДЕСЬ: class"image-category" . вы забыли = . Это должно быть class="image-category"

 .image-category {
  max-width: 33.33vw;
  min-width: 33.33vw;
  max-height: 66%;
  object-fit: cover;
}

  <div class="container">
      <img
        class="image-category"
        id="product1"
        src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dmVydGljYWx8ZW58MHx8MHw=amp;ixlib=rb-1.2.1amp;w=1000amp;q=80"
      />
      <img
        class="image-category"
        id="product2"
        src="https://images.pexels.com/photos/1459505/pexels-photo-1459505.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500"
      />
      <img
        class="image-category"
        id="product3"
        src="https://images.pexels.com/photos/433989/pexels-photo-433989.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500"
      />
    </div>

Развернуть фрагмент