Решить растяжение изображения
Я делаю проект, в котором я использую изображение обложки, как Google+.
Приблизительно на весь экран, но когда я загружаю картинки небольшого или очень большого размера, они растягиваются или сжимаются при предварительном просмотре.
простой тег, который я использую, чтобы поместиться в мой ящик
<img src="coverphotos/1291384_4846629064030_1548133592_o.jpg" height="530px" width="1024px" style="border-width: 0px; margin-top:-4px">
Очень очень важно Я хотел сделать обложку для своего проекта, но меня раздражает то, что он растягивается и делает картинку уродливой, как Facebook, Google + загружают обложку без растяжения?
Предварительный просмотр.
http://www.tiikoni.com/tis/view/?id=479959b
Я не хочу, чтобы он растягивался, пока загружаю на фб и гуглю его работает osm
Решение
Основываясь на вашей ссылке, эта CSS исправила проблему.
body {
width:100%;
margin: 0;
}
center {
width:100%;
}
center img {
width:100%;
height: auto;
}
Другие решения
Либо установить height в 530px ИЛИ установите width в 100%не делайте оба вместе.
Картинка не будет растянута и сохранит свое соотношение сторон. 🙂
Это: height="530px" width="100%"
Вы говорите картинке, чтобы она занимала всю ширину родительского элемента и была точно 530 пикселей в высоту. Вероятно, вам нужна неограниченная высота изображения, но ограниченная высота его родителя с помощью overflow: hidden,
Посмотрите на эту статью: Идеальное фоновое изображение для полной страницы