Блог

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

Я использовал <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 в сети, но я хочу создать свой собственный.

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

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

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

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

 <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();