0

Есть блок div, который изменяется адаптивно под разные размеры экранов. Как сделать так, чтобы изображение, которое находится в нём изменяло свои размеры адаптивно и всегда было на полную ширину и высоту, но пропорционально. Делаю копипаст с сайта wix (https://www.pasxcel.com) чекните как на разных устройствах. Так-то изи, но не шарю в JS.

Я вставил свой код, который отображает как будет меняться контейнер. Мне лишь нужно чтобы изображение всегда было пропорциональным и занимало всю площадь контейнера. Например, если я смотрю с телефона, то изображение урезается по бокам и становится по всей длине контейнера, а он квадратный на мобильных, если же с компьютера, то контейнер прямоугольный и изображение обрезается сверху и снизу, но всё также занимает всю площадь контейнера.

* {
  padding: 0;
  margin: 0;
}

.img-container {
  position: relative;
  width: 100%;
  height: calc(20em + 15vw);
  overflow: hidden;
}
.img-container img {
  display: block;
  margin: -15% 0 0 0;
}
.img-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .51;
  }
<div class="img-container">
        <div class="img-overlay"></div>
       <img src="img/img1.jpg" alt="">
    </div> 
    

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

2 ответа 2

1

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

Посмотрите, как это можно реализовать на практике:

* {
    padding: 0;
    margin: 0;
}

.img-container {
    position: relative;
    width: 100%;
}

img {
    display: block;
    width: 100%;
}

.img-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.51;
}
<div class="img-container">
    <div class="img-overlay"></div>
    <img src="https://placehold.it/1903x650">
</div>

Сохранение пропорций, браузер по умолчанию берёт на себя, если вы, конечно, не переопределяется где-то размеры абсолютными значениями.

Если же такой вариант не подходит и вам нужно, чтоб изображение адаптивно обрезалось (простите, но формулировка вопроса не очевидна), то попробуйте сделать так:

* {
    padding: 0;
    margin: 0;
}

.img-container {
    position: relative;
    width: 100%;
    height: calc(20em + 15vw);
}

.img-backgroung {
    width: 100%;
    height: 100%;
    background: url("https://placehold.it/1903x650") center no-repeat;
}

.img-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.51;
}
<div class="img-container">
    <div class="img-overlay"></div>
    <div class="img-backgroung"></div>
</div>

Браузер, опять-таки, сделает всё за вас.

Удачи!

0

* {
  padding: 0;
  margin: 0;
}

.img-container {
  position: relative;
  width: 100%;
  height: calc(20em + 15vw);
  overflow: hidden;
}
.img-container img {
  display: block;
  margin: -15% 0 0 0;
}
.img-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .51;
  }
<div class="img-container">
        <div class="img-overlay"></div>
       <img src="img/img1.jpg" alt="">
    </div> 
    

* {
  padding: 0;
  margin: 0;
}

.img-container {
  position: relative;
  width: 100%;
  height: calc(20em + 15vw);
  overflow: hidden;
}
.img-container img {
  display: block;
  margin: -15% 0 0 0;
  width: 100%;
  height: 100%;
}
.img-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .51;
  }
<div class="img-container">
        <div class="img-overlay"></div>
       <img src="img/img1.jpg" alt="">
    </div> 
    

13
  • 1
    Хорошо было бы добавить пояснений, что вы сделали и зачем. 23 мая 2019 в 5:48
  • вот и всё для .img-container img width: 100%; height: 100%; 23 мая 2019 в 5:49
  • Но изображение при этом не пропорционально... 23 мая 2019 в 5:51
  • Eсли пропорционально для img height: auto; 23 мая 2019 в 5:52
  • .img-container img { width: 100%; height: auto; } 23 мая 2019 в 5:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.