reizing любое изображение внутри div

Я видел довольно много сообщений здесь с похожими вопросами, и они, казалось, получили большой ответ. Однако моя проблема заключается в том, что я не могу понять логику происходящего, и поэтому я считаю, что смотреть на код бессмысленно. Также я очень хочу понять код, который я пишу. Так что действительно я не для какого-либо полного кода, поскольку я думаю, что могу получить это из других сообщений, но, если возможно, кто-то может объяснить мне теорию кода.reizing любое изображение внутри div

Так что, если у меня есть DIV 500px в ширину и 400px в высоту и затем две фотографии:

фото 1: 1000px шириной 800px высокого
фото 2: 250px шириной 700px высокого

Как изменить размер этих изображений, чтобы они соответствовали внутри div без их растяжения или искажения.

Как я уже говорил, я не ищу код. Может кто-то просто объяснить формулу, которая идеально подходит для фотографий внутри div.

источник

2015-05-28 troy beckett

Установите фотографию 'width' в' 100% 'в' CSS' - было бы неплохо начать. – lshettyl

Все говорят это, но это не правильный ответ. Некоторые изображения являются пейзажем, а некоторые - портретом, поэтому это не работает. –

Почему бы не установить его как фоновое изображение и использовать обложку? – Adam

(простой) asnwer в том, что браузер знает соотношение сторон вашего изображения.

Если вы просто используете тег <img>, изображение будет отображаться в оригинальном размере (и соотношении сторон).

Теперь, если вы укажете ширину, но не высоту, размер рациона будет сохранен, поэтому ваше изображение не будет искажено.

Если вы используете атрибут CSS, например max-width, и/или max-height, это в значительной степени то, что происходит: ваш браузер принимает изображение и, если необходимо, масштабирует как с, так и высоту с тем же коэффициентом в соответствии с вашими спецификациями.

Ответит ли это на ваш вопрос?

источник

2015-05-28 10:20:41 Burki

Что делать, если у меня есть изображение с большей шириной, и я установил ширину до 100%, в таком случае, как будет поддерживаться соотношение? – Rayon

Вот что я имею в виду. Существует формула, которую люди используют, но я не могу полностью ее реализовать в своем коде. Поэтому я надеялся, что некоторые объяснят. Но эти методы css - это не ответы, но спасибо за вашу помощь –

@troybeckett, тогда кажется, что я правильно не понял ваш вопрос. Может быть, вы могли бы немного разъяснить? – Burki

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

Установка ширины до 100%, а высота, оставшаяся до авто, масштабирует изображение до его ширины, не гарантируя, что высота будет соответствовать желаемому выходу. Вы можете масштабировать его по высоте, но та же проблема. Это особенно сложно, когда речь заходит об обращении с изображениями.

Использования объектна-FIT может помочь, когда вы контейнер таким же, но изображения изменяться в широких пределы в соотношении, как показано здесь https://css-tricks.com/almanac/properties/o/object-fit/

Или иметь ваши набор изображений в качестве фона изображения с фоном размером: обложка.

источник

2015-05-28 10:30:32

reizing любое изображение внутри div

ответ

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