Блог

Главная - Вопросы по программированию - Изображения одинаковой высоты с использованием Flexbox без установки фиксированной высоты?

Изображения одинаковой высоты с использованием Flexbox без установки фиксированной высоты?

#html #css #wordpress #flexbox #grid

#HTML #css #wordpress #flexbox #сетка

Вопрос:

Здравствуйте, я пытаюсь сделать два изображения одинаковой высоты с помощью Flexbox на веб-сайте WordPress.

вот мой код:

 .wrapper {
  display: flex;
}

.wrapper > div:first-child {
  margin-left: 15px;
}

.wrapper img{
 width:150px;
}  
 <div class="wrapper">
<div class="img1"><img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-1882120_1280-3.png" />

<p>WordPress is the world’s most popular site builder. It powers more than 33% of all websites on the internet, that’s millions of websites all over the world.</p>
</div>

<div class="img2"><img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-923188_1280-2.jpg" />
<p>WordPress started as a simple blogging platform back in 2003. Since then it has evolved to become a content management system and an application development framework.</p>
</div>
</div>

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

1. почему бы вам не установить фиксированную высоту в вашем img, как вы сделали для ширины?

2. Но я не хочу устанавливать фиксированную высоту, это разбивает мое изображение на меньшем экране. Есть ли какой-нибудь способ использовать flexbox??

3. Вам нужно установить изображение в контейнере, как я это сделал. Если вы действительно не можете, у вас может быть способ использования flex, но более сложный

Ответ №1:

Я устанавливаю изображение в контейнер img-container с фиксированной высотой. И в этом я установил ваш img , как показано ниже:

 .img-container{
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.wrapper img{
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Я также установил ваш 2 div img следующим образом:

 .img1, .img2{
  width: 50%;
}

Конечный результат:

 .wrapper {
  display: flex;
}

.wrapper > div:first-child {
  margin-left: 15px;
}
.img1, .img2{
  width: 50%;
}
.img-container{
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.wrapper img{
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}  
 <div class="wrapper">
  <div class="img1">
    <div class="img-container">
      <img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-1882120_1280-3.png" />
    </div>
    <p>WordPress is the world’s most popular site builder. It powers more than 33% of all websites on the internet, that’s millions of websites all over the world.</p>
  </div>

  <div class="img2">
    <div class="img-container">
      <img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-923188_1280-2.jpg" />
    </div>
    <p>WordPress started as a simple blogging platform back in 2003. Since then it has evolved to become a content management system and an application development framework.</p>

  </div>
</div>

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

1. при изменении размера браузера мое изображение все еще отображается на меньшем экране

2. @Mar Здесь я исправил с помощью небольшого overflow: hidden трюка

3. Мне не сложно изменить размер браузера, и вы увидите проблему по высоте

4. @Mar Вы должны понимать, что 2 базовых изображения, которые не имеют одинакового базового размера, никогда не станут лучше. Я только что проверил, что на телефоне и компьютере размер iamge всегда находится в одной строке. Так что, я думаю, если вы хотите стать лучше, вам нужно будет вручную изменить размер и вырезать изображение, чтобы получить желаемый результат. Но вы не сможете стать лучше

5. Да, вы абсолютно правы, возможно, с flex box все сложнее

Ответ №2:

Я добавил высоту 100 пикселей

 .wrapper {
  display: flex;
}

.wrapper > div:first-child {
  margin-left: 15px;
}

.wrapper img{
 width:150px;
 height: 100px;
}  
 <div class="wrapper">
<div class="img1"><img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-1882120_1280-3.png" />

<p>WordPress is the world’s most popular site builder. It powers more than 33% of all websites on the internet, that’s millions of websites all over the world.</p>
</div>

<div class="img2"><img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-923188_1280-2.jpg" />
<p>WordPress started as a simple blogging platform back in 2003. Since then it has evolved to become a content management system and an application development framework.</p>
</div>
</div>

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

1. Есть ли способ сделать ту же высоту без установки фиксированной высоты, можно ли это сделать с помощью flexbox??

2. если исходные изображения не имеют одинаковой высоты, вам придется установить высоту, вы не можете указывать высоту с помощью flexbox, flexbox предназначен только для макетов