Есть ли решение только для css для масштабирования изображения в ограничивающую рамку (с сохранением соотношения сторон)? Это работает, если изображение больше контейнера:
img {
max-width: 100%;
max-height: 100%;
}
Пример:
- Пример использования 1 (работает): http://jsfiddle.net/Jp5AQ/2/
- Пример использования 2 (работает): http://jsfiddle.net/Jp5AQ/3/
Но я хочу увеличить изображение до тех пор, пока размер контейнера не станет 100%.
- Вариант использования 3 (не работает): http://jsfiddle.net/Jp5AQ/4/
Ответы:
Примечание. Несмотря на то, что это принятый ответ, приведенный ниже ответ более точен и в настоящее время поддерживается во всех браузерах, если у вас есть возможность использовать фоновое изображение.
Нет, нет единственного способа сделать это в обоих направлениях с помощью CSS. Вы могли бы добавить
Чтобы элемент всегда имел 100% ширину и автоматически масштабировал высоту до соотношения сторон или наоборот:
чтобы всегда масштабироваться до максимальной высоты и относительной ширины. Чтобы сделать и то, и другое, вам нужно будет определить, выше или ниже соотношение сторон, чем у контейнера, а CSS этого сделать не может.
Причина в том, что CSS не знает, как выглядит страница. Он заранее устанавливает правила, но только после этого элементы визуализируются, и вы точно знаете, с какими размерами и соотношениями вы имеете дело. Единственный способ обнаружить это - с помощью JavaScript.
Хотя вы не ищете JS-решение, я все равно добавлю его, если оно кому-то понадобится. Самый простой способ справиться с этим с помощью JavaScript - добавить класс, основанный на разнице в соотношении. Если отношение ширины к высоте поля больше, чем у изображения, добавьте класс fillwidth, иначе добавьте класс fillheight.
Показать фрагмент кода
источник
Благодаря CSS3 есть решение!
Решение состоит в том, чтобы поместить изображение как,
background-image
а затем установитьbackground-size
значениеcontain
.HTML
CSS
Проверьте это здесь: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
Полная совместимость с последними версиями браузеров: http://caniuse.com/background-img-opts
Чтобы выровнять div по центру, вы можете использовать этот вариант:
источник
<div class=image style="background-image: url('/images/foo.jpg');"></div>
. Все остальные стили следует применять с помощью CSS.Вот хакерское решение, которое я обнаружил:
Это увеличит изображение в десять раз, но ограничит его до 10% от его окончательного размера - таким образом, привязав его к контейнеру.
В отличие от
background-image
решения, это также будет работать с<video>
элементами.Интерактивный пример:
Показать фрагмент кода
источник
transform-origin: top left
чтобы остановить обрезку. / ZombieСегодня просто скажите объектно-подходящий: содержать. Поддержка - это все, кроме IE: http://caniuse.com/#feat=object-fit
источник
object-fit
он все еще находится в стадии разработки.object-fit
: stackoverflow.com/a/46456673/474031HTML:
CSS:
источник
Вы можете добиться этого с помощью чистого CSS и полной поддержки браузером, как для изображений, длинных по вертикали, так и по горизонтали одновременно.
Вот фрагмент, который работает в Chrome, Firefox и Safari (как с его использованием
object-fit: scale-down
, так и без него):источник
Другое решение без фонового изображения и без контейнера (хотя должны быть известны максимальные размеры ограничивающей рамки):
Если требуется использование контейнера, тогда max-width и max-height могут быть установлены на 100%:
Для этого у вас будет что-то вроде:
источник
В этом примере изображение растягивается пропорционально до размера всего окна. Импровизация к приведенному выше правильному коду заключается в добавлении
$( window ).resize(function(){});
Есть два условия if. Первый продолжает проверять, меньше ли высота изображения, чем div, и применяет
.fillheight
класс, а следующий проверяет ширину и применяет.fillwidth
класс. В обоих случаях другой класс удаляется с помощью.removeClass()
Вот CSS
Вы можете заменить
100vh
на,100%
если хотите растянуть изображение с помощью div. В этом примере изображение растягивается пропорционально до размера всего окна.источник
Вы хотите масштабироваться вверх, но не вниз?
Однако это не фиксирует соотношение сторон.
источник
Я использовал таблицу для центрирования изображения внутри коробки. Он сохраняет соотношение сторон и масштабирует изображение полностью внутри коробки. Если изображение меньше прямоугольника, то оно отображается в центре. В приведенном ниже коде используется поле шириной 40 пикселей и высотой 40 пикселей. (Не совсем уверен, насколько хорошо это работает, потому что я удалил его из другого более сложного кода и немного упростил)
CSS:
HTML:
источник
Самый чистый и простой способ сделать это:
Сначала немного CSS:
HTML:
Это должно помочь!
источник
Мне это помогло:
Затем в элементе (вы можете использовать javascript или медиа-запросы, чтобы добавить отзывчивость):
Надеюсь это поможет!
источник
Я редактирую свой ответ, чтобы подробнее объяснить свое решение, так как я проголосовал против.
Когда стили установлены, как показано выше в CSS, теперь следующий HTML-блок будет показывать изображение, всегда подходящее по ширине, и будет регулировать соотношение сторон высоты к ширине. Таким образом, изображение будет масштабироваться, чтобы соответствовать ограничивающей рамке, как указано в вопросе.
источник