Я уже пару дней пытаюсь настроить мою галерею эскизов, чтобы все изображения были одинаковой высоты и ширины. Однако, когда я меняю код Css на,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
Я получаю изображения одинакового размера, но с растянутым соотношением сторон изображения. нет способа изменить размер контейнера изображения, а не изображения? позволяя мне сохранить соотношение сторон. но все же измените размер изображения. (Я не возражаю, если я обрежу часть изображения.)
Заранее спасибо!
overflow: hidden
чтобы обрезать лишнее,Вы можете использовать
object-fit
свойство css3, напримерЭто не совсем ваш ответ, потому что он не растягивает контейнер, но ведет себя как галерея, и вы можете продолжить стилизацию самого
img
себя.Еще одним недостатком этого решения является плохая поддержка свойства css3. Более подробная информация доступна здесь: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . Там же можно найти решение jQuery.
источник
Чтобы сделать изображения настраиваемыми / гибкими, вы можете использовать это:
источник
Поместите его в качестве фона на держатель, например
Это позволит центрировать ваше изображение внутри div размером 120x120 пикселей, удалив излишки изображения.
источник
Если вы не хотите растягивать изображение, поместите его в контейнер div без переполнения и отцентрируйте, отрегулировав поля, если необходимо.
HTML:
CSS:
источник
Пример:
см. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
источник
если вы знаете спектральный коэффициент, вы можете использовать padding-bottom с процентами, чтобы установить высоту в зависимости от разницы.
источник