При добавлении изображений в ваш дизайн, особенно если он будет реагировать, используйте тег div с backgroundсвойством CSS вместо img элементов. Это может показаться, что больше работы за бесценок, но это на самом деле делает его гораздо проще стиль изображения должным образом, сохраняя свой первоначальный размер и благодаря background-size, background-positionи другим свойствам.
HTML
Код
<section>
<p>Элемент изображение</p>
<img src="http://zornet.ru/ABVUN/sarunolas/milsagtugsa/bicycle.jpg" alt="bicycle">
</section>
<section>
<p>Div с фоновым изображением</p>
<div></div>
</section>
CSS
Код
img {
width: 285px;
height: 195px;
}
div {
width: 285px;
height: 195px;
background: url('http://zornet.ru/ABVUN/sarunolas/milsagtugsa/bicycle.jpg');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
Недостатком этого метода является то, что веб-доступность вашей страницы будет немного ударить, так как изображения не будут сканироваться должным образом с помощью экранных устройств и поисковых систем. Эта проблема может быть решена с помощью потрясающей привязки к объекту, но пока у нее нет полной поддержки браузера.
Где может показаться немного суровым, но аннулирование полей и прокладок на самом деле упрощает компоновку элементов, поскольку между ними не учитываются промежутки по умолчанию. Свойство box-sizing: border-box; является еще одним хорошим значением по умолчанию, который мы будем говорить о более в нашем следующем наконечнике.
Демонстрация
