Блог

Главная - Вопросы по программированию - Масштабируемое изображение с текстом рядом с ним

Масштабируемое изображение с текстом рядом с ним

#html #css

#HTML #css

Вопрос:

Я пытаюсь сделать изображение рядом с текстом масштабируемым и отзывчивым. В настоящее время, когда я запускаю свою html-страницу, есть div, который выглядит следующим образом:

введите описание изображения здесь

Это хорошо, но когда я пытаюсь изменить размер своего окна, оно будет выглядеть так: введите описание изображения здесь

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

Есть ли какой-либо возможный способ масштабировать изображение, когда под ним находится текст, но сохранить его, когда достаточно места для размещения текста рядом с изображением? Это должно выглядеть так:

введите описание изображения здесь

Мой текущий код

 .cake {
  background-color: white;
  overflow: hidden;
  padding: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.cake p {
  margin-bottom: 0;
  text-align: justify;
}

.cake>.price {
  margin-right: 10px;
}

.cake>img {
  padding-right: 20px;
  float: left;
  overflow: hidden;
  width: 100%;
  min-width: 240px;
  max-width: 300px;
  height: 200px;
  display: block;
  object-fit: cover;
}

.price {
  float: right;
}  
 <div class="cake">
  <img src="https://i.imgur.com/xWRtGkj.jpg">
  <h4>Cheesecake</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
  <span class="price">45</span>
</div>

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

1. загрузите свою фотографию в imgur и добавьте ее, ваш вид и доступный вид кода отличаются

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

Ответ №1:

Вы можете использовать flexbox для этого, но если вы не хотите изменять свой код на flexbox , вы можете сделать это, как показано ниже

 .cake {
    background-color: white;
    overflow: hidden;
    padding: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.cake p {
    margin-bottom: 0;
    text-align: justify;
}
.cake > .price {
    margin-right: 10px;
}
.cake > img {
    padding-right: 20px;
    float: left;
    overflow: hidden;
    width: 100%;
    min-width: 240px;
    height: 200px;
    display: block;
    object-fit: cover;
}
.price {
    float: right;
}

@media (min-width: 430px) {
    .cake > img {
        max-width: 300px;
    }
}  
 <div class="cake">
  <img src="https://i.imgur.com/xWRtGkj.jpg">
  <h4>Cheesecake</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
  <span class="price">45</span>
</div>

Ответ №2:

вы можете использовать медиа-запрос, используя медиа-запросы

 .cake {
  background-color: white;
  overflow: hidden;
  padding: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.cake p {
  margin-bottom: 0;
  text-align: justify;
}

.cake>.price {
  margin-right: 10px;
}

.cake>img {
  padding-right: 20px;
  float: left;
  overflow: hidden;
  width: 100%;
  min-width: 240px;
  max-width: 300px;
  height: 200px;
  display: block;
  object-fit: cover;
}

.price {
  float: right;
}

@media only screen and (max-width: 768px) { /*put the breakpoint where the text wrap*/
  .cake p {
     width: 100%;
   }
}