Верстка. Выход изображения за пределы фиксированного дива.
Здравствуйте! Вопрос по верстке. Была необходимость любое по размеру изображение вписать в фиксированный div (width: 240px; height:160px;). Для реализации этой цели было использованы следующие html код:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
Первая залитая картинка была 250х110, вписалась как нужно. А со второй возникли проблемы. Размеры картинки пропорционально уменьшались до необходимого замера, однако в верху появился отступ в 3px на который картинка выходит за нижнюю рамку ограничительного дива.
Если кто-то с подобным сталкивался, подскажите, пожалуйста, как быть.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<div class=”preview”>
<img src=”путь/до/изображения.jpeg” />
</div>
<style>
.preview {
background-color: #ffffff;
border: 1px solid #999999;
height: 160px;
line-height: 160px;
text-align: center;
width: 240px;
}
. preview img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
</style>
<img src=”путь/до/изображения.jpeg” />
</div>
<style>
.preview {
background-color: #ffffff;
border: 1px solid #999999;
height: 160px;
line-height: 160px;
text-align: center;
width: 240px;
}
. preview img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
</style>
Первая залитая картинка была 250х110, вписалась как нужно. А со второй возникли проблемы. Размеры картинки пропорционально уменьшались до необходимого замера, однако в верху появился отступ в 3px на который картинка выходит за нижнюю рамку ограничительного дива.
Если кто-то с подобным сталкивался, подскажите, пожалуйста, как быть.
1 ответов
Удалите тег img, картинку вставьте на бэкграунд блока .preview и задайте ему стиль
background-size: contain;
А три пиксела отступ, что у вас сейчас есть, это оттого, что у картинки вертикальное выравнивание и оно выравнивает как-то не так. Попробуйте задать img стиль
А три пиксела отступ, что у вас сейчас есть, это оттого, что у картинки вертикальное выравнивание и оно выравнивает как-то не так. Попробуйте задать img стиль
display: inline-block;