Возможно, вы захотите попробовать что-то вроде этого:
Допустим, ваш HTML выглядит так:
<body>
<div id="wrapper">
<img src="small-image.jpg" />
</div>
</body>
Вы можете сделать это с помощью CSS:
/* you can modify this as you see fit */
@media screen and (max-width: 480px) {
div#wrapper {
max-width: 100%;
overflow:hidden;
}
img {
max-width: 100%;
}
}
Примечание. Это будет работать только в том случае, если вы установите ширину для элемента обтекания, как мы делаем там. max-width также подходит для этого. Если вы этого не сделаете, элемент, вероятно, растянется вместе с изображением.
Это гарантирует, что большие изображения никогда не станут больше, чем элемент, который их окружает, но меньшие изображения не будут изменены.