Как сделать изображение отзывчивым и автоматически уменьшить высоту - PullRequest
Новая
       15

Как сделать изображение отзывчивым и автоматически уменьшить высоту

0 голосов
/ 02 июля 2019

У меня есть два неравных адаптивных столбца, меньший справа - текст, а больший слева - изображение.Когда я изменяю размер окна браузера, чтобы увидеть, как столбцы помещаются на странице, он работает нормально, пока не достигнет максимальной ширины 700 пикселей и стопки столбцов друг на друга.Нижний столбец в порядке, однако верхний столбец (изображение) не показывает полное изображение только крошечной полоской, идущей по ширине страницы.Как я могу получить его для автоматической регулировки высоты, чтобы показать полное изображение?

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

.column {
      float: left;
      padding: 10px;
      height: 300px;
  
  
    }

    .left {
      width: 60%;
      background-image: url('http://i.imgur.com/k5gf0zz.jpg');
      background-size: cover;
      background-position: center;

    }

    .right {
      width: 40%;
    }

    /* Clear floats after the columns */
    .row:after {
     content: "";
     display: table;
     clear: both;
    }


    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 700px) {
      .column {
        width: 100%;
      }
     
 
    }
<body>

    <div class="row">
      <div class="column left";>
    
  
      </div>
      <div class="column right" style="background-color:#FDE4EC;">
      <center> <p><font size="8">We Provide Quality Skin Care</font></p>
     <p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p> 
 
     <br> 
 
     <button class="button2"><b>BOOK NOW</b></button> </center>

  
  
       </div>
    </div>


    </body>

Любая помощь будет очень ценится:)

Ответы [ 3 ]

0 голосов
/ 02 июля 2019 

img{
  max-width:100%;
  height:auto;
  display:none;
}
.left {
  width: 60%;
background:url("http://i.imgur.com/k5gf0zz.jpg") no-repeat center;
background-size:cover;
}


.right {
  width: 40%;
  padding: 10px 0px;
}
.row{
  display:flex;
  flex-wrap:wrap;
}

@media screen and (max-width: 700px) {
  .column {
    width: 100%;
  }
  img{
    display:block;
  }
  .left {
  background:none;

  }

}
<div class="row">
  <div class="column left";>
<img src="http://i.imgur.com/k5gf0zz.jpg">

  </div>
  <div class="column right" style="background-color:#FDE4EC;">
  <center> <p><font size="8">We Provide Quality Skin Care</font></p>
 <p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p> 

 <br> 

 <button class="button2"><b>BOOK NOW</b></button> </center>



   </div>
</div>

попробуйте добавить img в html с max-width:100% и height:auto для маленьких экранов и div с background для больших экранов!

0 голосов
/ 02 июля 2019

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

<picture id="pic">
<source media="(min-width: 650px)" srcset="image.jpg">
<img src="image2.jpg" alt="same pic bigger size" style="width:auto;">
</picture>
0 голосов
/ 02 июля 2019

Снять высоту и добавить мин-высоту 

  .left {
  min-height: auto;
  }
...