Предельное изображение по высоте и ширине

-2

У меня возникают проблемы с ограничением моих изображений шириной или высотой, в зависимости от того, что выходит за пределы.Предельное изображение по высоте и ширине

Некоторые изображения, которые я загружаю, например, выше 450 пикселей, а другие - более 450 пикселей. Как я могу установить их так, чтобы ширина и высота не превышали 450 пикселей.

Это такая основная вещь, но я не знаю, как это сделать, я ценю любую помощь!

EDIT: Я надеялся, что это можно решить с помощью css html, поэтому я не упоминал язык, но если это более сложное решение, то я использую метеорит .. поэтому javascript и jquery.

источник

2015-10-21 socialight

Вы пробовали что-нибудь вообще? Вы не сказали нам, какой язык программирования вы используете для получения загруженного контента. Или вы просто хотите ограничить их CSS? –

Я надеялся, что это можно решить с помощью css html, поэтому я не упомянул, но если это более сложное решение, то я использую метеорит .. поэтому javascript и jquery. Спасибо! – socialight

Это будет сложно решить с помощью css. В css нет реального изменения размера; у вас все еще есть один и тот же контент. Скажем, например, вы загружаете изображение 3840x2160 пикселей ... если вы измените размер в CSS или на стороне сервера, до 450x450, это будет искажено. Однако с помощью CSS вы будете загружать большее изображение каждый раз. Это может вызвать нагрузку на сервер или пользователь, просматривающий визуализированную страницу, если их много. Обычно для этого создаются эскизы. –

Используйте max-width и max-height свойства CSS (и не устанавливать width/height атрибуты на img теге)

img{ 
    max-width:450px; 
    max-height:450px; 
}

иметь в виду, что это применяется при отображении изображений. Если вы хотите ограничить реальную ширину/высоту изображения, чтобы сохранить пространство на сервере, вам нужно будет посмотреть, как загрузить плагины с настройками для уменьшения изображения.

источник

2015-10-21 18:42:02

Другой альтернатива была бы «урожай» образом как это:

<div style="max-height:450px; max-width:450px; overflow: hidden"> 
    <img src="myImage.png" /> 
</div>

Это будет обрезать с верхним левым угла, который может или не может быть то, что вы хотите.

источник

2015-10-21 18:45:31

Простой HTML

<img src="xyz.jpg" alt="Its You" height="200px" width="200px">

источник

2018-02-02 06:52:45

Предельное изображение по высоте и ширине

ответ

Смежные вопросы