0

Как сделать чтобы изображение img изменяла размер пропорционально в зависимости от высоты другого div блока и что бы этот блок не наезжал на img.

html,
body {
    height: 100%;
}

.cont {
position:relative;  
  height:300px;
  width: 300px;
  border: 3px solid #000;
}

img {
  position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.footer {
  background-color:red;
  position: absolute;
  width:100%;
  height: 100px;
  bottom:0;
}
<div class="cont">
  <img src="http://placehold.it/750x350" alt="">
  <div class="footer">
  
  </div>
</div>

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

1 ответ 1

0

Зачем тогда позиционировать изображение абсолютно?

UPDATE

html,
body {
    height: 100vh;
    margin: 0;
}

*
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cont {
position:relative;  
  height:100%;
  padding-bottom: 100px;
  width: 300px;
  border: 3px solid #000;
}

.image
{
  position:relative;
  height: 100%;
  width: 100%;
}

img {
  /* position: absolute; */
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    /* top: 0; */
}

.footer {
  background-color:red;
  position: absolute;
  width:100%;
  height: 100px;
  bottom:0;
}
<div class="cont">
  <div class="image"><img src="http://placehold.it/750x350" alt=""></div>
  <div class="footer">
  
  </div>
</div>

5
  • Спасибо за ответ, он что делать с тем что footer когда увеличиваешь height начинает наезжать на картинку вместо того чтобы картинка уменьшала размер пропорционально ?
    – Richard B.
    20 сен 2016 в 10:57
  • @RichardB., а за счет чего он увеличивается в высоте? 20 сен 2016 в 11:33
  • В общем смысл такой, нужно что бы родитель был на всю высоту браузера футер был зафиксирован к низу родителя а изображение занимала всю верхнюю часть и по ширине не выходила за пределы родителя и когда браузер по высоте уменьшается футер не должен наезжать на картинку а она должна ресайзиться пропорционально родителя.
    – Richard B.
    20 сен 2016 в 12:24
  • jsfiddle.net/zskvqe0k попробуйте поресайзить 20 сен 2016 в 12:47
  • То что нужно, благодарю!
    – Richard B.
    20 сен 2016 в 12:50

Ваш ответ

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

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