Изменить высоту изображения в окне просмотра - PullRequest
Новая
       8

Изменить высоту изображения в окне просмотра

3 голосов
/ 21 января 2020

Я использую Bootstrap 3 и в настоящее время работаю с изменением размера изображений. Я хотел бы иметь больше контроля над высотой изображения в разных видовых экранах. Приведенный ниже пример фактически иллюстрирует то, что я хотел бы, но причина, по которой он работает, заключается в том, что я установил класс item1. Проблема в том, что изображение теперь странно растягивается.

Если я удаляю пользовательские классы item1, я сделал изображение отзывчивым. Но высота изображения просто мала на маленьких окнах просмотра.

Есть ли хороший способ управления высотой изображения, если высота изображения должна быть разной в окнах просмотра?

С уважением 

<style>
    .banner{position:relative}
    .banner img{width:100%}
    .banner .container{position: absolute; left:0; right:0; top:50%; text-align:left; transform:translateY(-50%)}
    .home_slider_content
    {
        max-width: 580px;
    }
    .home_slider_title
    {
        font-size: 60px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 1.2;
    }
    .home_slider_subtitle
    {
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 2.14;
        margin-top: 22px;
    }
    .home_button
    {
        margin-top: 40px;
    }
    
    @media screen and (min-width: 300px) {
        .item1 {
            height: 500px;
        }
    }

    @media screen and (min-width: 800px) {
        .item1 {
            height: 600px;
        }
    }
</style>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>
    <div class="banner">
        <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg" class="img-responsive item1">
        <div class="container">
            <div class="home_slider_content">
                <div class="home_slider_title">A new Online Shop experience.</div>
                <div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra
                    velit venenatis fermentum luctus.</div>
                <div class="button button_light home_button"><a href="#">Shop Now</a></div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Ответы [ 2 ]

1 голос
/ 21 января 2020

обновление ниже в css. 

.banner img{
  height:auto;
  max-width:100%;
  max-height:90%;

}


<style>
    .banner{position:relative}
    .banner img{
      height:auto;
      max-width:100%;
      max-height:90%;

    }
    .banner .container{position: absolute; left:0; right:0; top:50%; text-align:left; transform:translateY(-50%)}
    .home_slider_content
    {
        max-width: 580px;
    }
    .home_slider_title
    {
        font-size: 60px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 1.2;
    }
    .home_slider_subtitle
    {
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 2.14;
        margin-top: 22px;
    }
    .home_button
    {
        margin-top: 40px;
    }
    
    @media screen and (min-width: 300px) {
        .item1 {
            height: 500px;
        }
    }

    @media screen and (min-width: 800px) {
        .item1 {
            height: 600px;
        }
    }
</style>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>
  <body>
    <div class="banner">
        <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg" class="img-responsive item1">
        <div class="container">
            <div class="home_slider_content">
                <div class="home_slider_title">A new Online Shop experience.</div>
                <div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra
                    velit venenatis fermentum luctus.</div>
                <div class="button button_light home_button"><a href="#">Shop Now</a></div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>
0 голосов
/ 21 января 2020

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

.banner img {
  width: 100%;
}
...
@media screen and (min-width: 800px) {
  .item1 {
    height: 500px;
  }
}

Вы установили class="img-responsive" для изображения item1. Это означает, что это изображение уже имеет height:auto, поэтому в адаптивном дизайне лучше присвоить изображению item1 такую ​​же ширину, как 

.banner img {
  width: 100%;
}
...
@media screen and (min-width: 768px) {
  .item1 {
    width: 420px; /* example, or use a % */
  }
}

. Попробуйте использовать правильные точки прерывания @media Bootstrap в * 1028. * 3:

min-width: 768px / min-width: 992px / min-width: 1200px

Вы изменили css класса .container в положении: абсолютное с фиксированным левым и правильно. Это создаст проблемы, поскольку .containeer не определен таким образом в Bootstrap.

update

Пример использования классов Bootstrap с вашим изображением и текстом . 

<div class="container">
  <div class="row banner">
    <div class="col-sm-12 item1">
      <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg" class="img-responsive" alt="">
    </div>
    <div class="col-sm-12 home_slider_content">
      <div class="home_slider_title">
        A new Online Shop experience.
      </div>
      <div class="home_slider_subtitle">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Nullam a ultricies metus.
        Sed nec molestie eros. Sed viverra
        velit venenatis fermentum luctus.
      </div>
      <div class="home_button">
        <a href="#" class="btn btn-success">Shop Now</a>
      </div>
    </div>
  </div>
</div>

с css

.banner .item1 img {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 576px) {
  .banner .item1 img { width: 400px; }
}
@media (min-width: 768px) {
  .banner .item1 img { width: 650px; }
}
@media (min-width: 992px) {
  .banner .item1 img { width: 900px; }
}
.home_slider_content {
  margin-top: 22px;
  text-align: center;
}
.home_slider_title {
  font-size: 60px;
  font-weight: 600;
  background-color: #933;
  color: #fff;
  line-height: 1.2;
}
.home_slider_subtitle {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 400;
  background-color: #c66;
  color: #fff;
  line-height: 2.14;
}
.home_button {
  margin-top: 40px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...