Уменьшение больших изображений

Question

Я только начал создавать просмотрщик изображений как проект, но я застрял на этом этапе.

Я использовал <img src="some.jpg" width="500" height="500" />.Проблема в том, что это хорошо работает, если ширина изображения ближе к 500 или больше 500, но что, если размер изображения где-то в 200 или 100 или 300?

Это расширяет изображение с шириной 200размер до 500, это заставляет мои изображения выглядеть так плохо, и это не то, что я хотел.Я просто хочу, чтобы изображения размером более 500 сократились до 500, а изображения размером 200 или 300 по ширине должны быть такими же, как 200 или 300.

Если я использую <img src="some.jpg" />, он принимает размер изображения по умолчанию.

Решение jQuery также высоко ценится.Я могу найти множество плагинов для просмотра изображений jQuery в сети, но я хочу сделать свои собственные.

Answer 1

Вы можете попробовать стиль CSS "max-width" на изображении.

<img src="some.jpg" style="max-width:500px"/>.

Я включил CSS только для демонстрационных целей.

Answer 2

поместите изображение в контейнер и проверьте прокрутку, если есть прокрутка -> изменить размер, иначе ничего не делать или уменьшить размер контейнера до размера изображения (в зависимости от потребностей вашего потока)

<div class="imgCont" style="width:500px;height:500px;overflow:hidden">
<img src="some.jpg" /> 
</div>

пример проверки вертикальной прокрутки (с помощью jQuery):

var el = $(".imgCont"),
    hasVerticalScroll = el.get(0).scrollHeight > el.innerHeight();