Изменение размера картинки в блоке

403

03 февраля 2017, 03:48

Есть макет вида:

<div class="left">
text
</div>
<div class="right">
text
</div>
<div class="center">
<img....>
</div>

CSS:

.left {
float: left;
width: 303px;
padding: 30px 0 0 0;
}
.right {
float: right;
width: 425px;
padding: 30px 0 0 0;
}
.center {
padding: 0 40px;
text-align: center;
max-width: 100%;
}

При уменьшении окна браузера блок с изображением уходит вниз. Каким образом можно уменьшать изображение при уменьшении размеров окна браузера средствами css?

Пробовал стиль изображения

.center img {
max-width: 100%;
height: auto;
}

Не помогает.

Answer 1

Проценты высчитываются относительно родительского блока, а его у вас нет. Добавьте блоку .center стиль position:relative; и тогда изображение не будет выходить за его пределы.

.left { 
  float: left; 
  width: 303px; 
  padding: 30px 0 0 0; 
} 
 
.right { 
  float: right; 
  width: 425px; 
  padding: 30px 0 0 0; 
} 
 
.center { 
  padding: 0 40px; 
  text-align: center; 
  max-width: 100%; 
 
  position:relative; 
} 
 
.center img { 
  max-width: 100%; 
  height: auto; 
}

<div class="left">text</div> 
<div class="right">text</div> 
<div class="center"><img src='https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg'/></div>