Главная » Языки программирования

Css сделать квадратное изображение

Содержание
  1. doctor Brain
  2. Изображение фиксированного размера
  3. Изображение нефиксированного размера
  4. Заключение
  5. Полезно прочитать
  6. Новые публикации
  7. JavaScript: сохраняем страницу в pdf
  8. HTML: Полезные примеры
  9. CSS: Ускоряем загрузку страницы
  10. JavaScript: 5 странностей
  11. JavaScript: конструктор сортировщиков
  12. Категории
  13. О нас
  14. Делаем все фотографии квадратными через css
  15. Ответы (6)
  16. Как «обрезать» прямоугольное изображение в квадрат с помощью CSS?
  17. Вот демонстрация вышеуказанной логики.

doctor Brain

В этом очень небольшом обзоре мы изучим, как установить соотношение сторон (пропорции) для изображения, размещаемого на HTML-странице. Для чего это нужно? К примеру, полученные знания будут полезны, если возникает необходимость уместить картинки различных размеров и пропорций в квадратный блок (или любой другой блок с четко определенными размерами и соотношением сторон), не искажая изображения.

Следует понимать, что в данном случае мы будем манипулировать CSS-свойствами, ни одно изображении не пострадает и сохранит свое первозданное состояние.

Изображение фиксированного размера

Если на страницу нужно вывести картинку заранее определенных размеров, можно воспользоваться атрибутами width и height .

Так как мы не знаем размеры и пропорции исходного изображения, применим CSS-свойство object-fit . Таким образом, мы сможем быть уверены, что картинка не деформируется.

Результат можно увидеть на нижеприведенной иллюстрации. Заметьте: исходное изображение имеет большую ширину, но оно не подверглось искажениям, вместо этого оно “обрезано” по центру:

object-fit: cover

Свойство object-fit принимает значения fill , contain , cover , none , scale-down . Подробно информацию можно изучить на сайте MDN.

Изображение нефиксированного размера

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

/* Position child elements relative to this element */ .aspect-ratio-box < position: relative; >/* Create a pseudo element that uses padding-bottom to take up space */ .aspect-ratio-box::after < display: block; content: ''; /* 16:9 aspect ratio */ padding-bottom: 56.25%; >/* Image is positioned absolutely relative to the parent element */ .aspect-ratio-box img < /* Image should match parent box size */ position: absolute; left: 0; top: 0; width: 100%; height: 100%; >

Приблизительно так будет выглядеть результат при соотношении сторон 16:9:

16:9

Свойство padding-bottom определяет высоту родительского контейнера, выраженную в процентах от его ширины. Например, при ширине блока 400px результирующая высота составит 56,25% от 400px, то есть около 225px.

Для того, чтобы определить нужное нам значение padding-bottom необходимо разделить высоту на ширину.

Например, при соотношении сторон 16:9, арифмитические манипуляции будут выглядеть так:

Выразим результ в процентах (умножим полученное число на 100):

Заключение

Мы научились выводить на HTML-изображение в различных пропорциях без деформации исходной картинки. Предложенные варианты работы с изображениями фиксированных и нефиксированных охватывают значительную часть стандартных ситуаций, возникающих при верстке.

Полезно прочитать

Новые публикации

Photo by CHUTTERSNAP on Unsplash

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник

Делаем все фотографии квадратными через css

Я пытаюсь сделать серию фотографий квадратными. Они могут быть прямоугольными по горизонтали (например, 600 x 400) или по вертикали (400 x 600), но я хочу, чтобы они были 175 x 175 в любом случае. Моя мысль заключалась в том, чтобы установить максимальную высоту или максимальную ширину на меньшей стороне и не допускать переполнения за пределы 175 пикселей на большей стороне. однако у меня с этим проблемы. Возможно ли это с помощью css? Ниже моя попытка, но она все еще дает прямоугольники:

Я не хочу просто делать width=175 height=175, так как это будет выглядеть очень искаженным. Но если немного исказить, то нормально. — person user749798 &nbsp schedule 22.11.2012

Ответы (6)

Вы можете установить ширину/высоту родительского div, а затем установить для дочернего тега img значение width:100%; высота: авто; Это уменьшит масштаб изображения, чтобы попытаться подогнать родителя с учетом соотношения сторон. Вы также можете установить изображение в качестве фонового изображения в div. Затем, если вы можете использовать css3, вы можете испортить свойство background-size. Его атрибуты: содержат, обложка или заданная высота (50%, 50%) (175 пикселей, 175 пикселей). Вы также можете попробовать отцентрировать изображение с фоновым положением.

Хорошо, я получил это. Не знаю, слишком поздно или что, но я придумал 100% чистый CSS способ создания квадратных миниатюр. Это то, что я пытался найти решение в течение некоторого времени и не повезло. После некоторых экспериментов у меня получилось. Два основных атрибута для использования: ПЕРЕПОЛНЕНИЕ:СКРЫТЫЙ и ШИРИНА/ВЫСОТА:АВТО. Хорошо, вот что делать: Допустим, у вас есть пачка изображений разной формы и размера, какой-то пейзаж, какой-то портрет, но все, разумеется, прямоугольные. Первое, что нужно сделать, это классифицировать ссылки на изображения (миниатюры) по книжной или альбомной ориентации, используя селектор классов. Хорошо, допустим, вы хотите просто создать две миниатюры, чтобы упростить задачу. у вас есть: img1.jpg (портрет) и img2.jpg (пейзаж) Для HTML это будет выглядеть так:

person Community schedule 24.01.2013

comment
Как узнать, какое изображение портретное, а какое альбомное, используя только css? - person Rodrigo Ruiz; 07.05.2014

comment
Это работает как рекламируется. Рекомендую * img классам использовать 100%, а не пиксели. Кроме того, это не будет использовать центр исходного изображения. - person William Entriken; 24.05.2014
comment
@RodrigoRuiz, вы можете использовать что-то вроде функции PHP getimagesize(). - person ethmz; 23.05.2015
comment
@ethmz Тогда это уже не 100% чистое решение CSS. - person Pedro Hoehl Carvalho; 24.11.2017

arrow_upward
1
arrow_downward

Вы можете использовать object-fit, который является широко поддерживается во всех основных браузерах. Если установлено значение cover, браузер будет обрезать изображение при установке свойств width и height, а не растягивать его.

Источник

Как «обрезать» прямоугольное изображение в квадрат с помощью CSS?

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

То, что я хотел бы сделать, это взять прямоугольные изображения и использовать CSS, чтобы они выглядели квадратными, не искажая изображение вообще.

введите описание изображения здесь

введите описание изображения здесь

Являются ли эти изображения фоновыми изображениями div или для SEO важно, чтобы они оставались в тегах ?

Вы уже пробовали что-нибудь? Это довольно просто с помощью CSS3 background-position или старой оболочки div с overflow:hidden изображением и относительным позиционированием.

Предполагая, что они не должны быть в тегах IMG .

.thumb1  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */ width: 250px; height: 250px; > .thumb1:hover  YOUR HOVER STYLES HERE >

РЕДАКТИРОВАТЬ: Если div нужно связать где-нибудь, просто настройте HTML и стили следующим образом:

.thumb1  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */ width: 250px; height: 250px; > .thumb1 a  display: block; width: 250px; height: 250px; > .thumb1 a:hover  YOUR HOVER STYLES HERE >

Обратите внимание, что это также может быть изменено, чтобы быть отзывчивым, например,% ширина и высота и т. Д.

Также обратите внимание, что при печати мачтовые браузеры отключают фоновые изображения, чтобы они не отображались.

Он может обрабатывать: состояния при наведении. Если div нужно связать где-нибудь, просто добавьте тег. Что касается печати, это можно исправить с помощью print.css? Поправьте меня если я ошибаюсь?

На самом деле, если честно, в этом случае с тегом A печать будет иметь откат, и в любом случае вы захотите добавить стили CSS, чтобы исправить это для печати в любом случае.

Чистое решение CSS без обертки div или другого бесполезного кода:

img  object-fit: cover; width:230px; height:230px; >

Обратите внимание, что это, к сожалению, не работает в IE и Edge atm. Подробнее об этом см. Здесь: stackoverflow.com/a/37792830/1398056

По состоянию на июнь 2018 года, похоже, только IE11 (2,71%) не поддерживает подгонку объектов, что достаточно для меня.

В 2019 году поддержка довольно хороша сейчас. Только 2,3% все еще используют IE 11. Это решение настолько простое, что я не могу не использовать его, потому что другие - такая боль, я потратил часы, пытаясь заставить его работать с внутренним кодом.

  1. Поместите свое изображение в div.
  2. Дайте вашему div явные квадратные размеры.
  3. Установите свойство переполнения CSS в div на hidden ( overflow:hidden ).
  4. Поместите свое воображение в div.
  5. Прибыль.
 style="width:200px;height:200px;overflow:hidden">  src="foo.png" />

Необходимо обеспечить центрирование или, по крайней мере, играть с позиционированием изображения внутри. Образец OP выглядит по центру (хотя я только упоминаю об этом и не ожидаю, что вы вообще измените свой ответ: P).

@rlemon - тогда OP может установить относительное положение div и положение изображения абсолютное, а также настроить атрибуты top и left.

.image-container  background-image: url('http://i.stack.imgur.com/GA6bB.png'); background-size:cover; background-repeat:no-repeat; width:250px; height:250px; >

Я на самом деле недавно столкнулся с этой же проблемой и в результате получил немного другой подход (я не мог использовать фоновые изображения). Однако для определения ориентации изображений требуется немного jQuery (я уверен, что вместо этого вы можете использовать обычный JS).

Я написал сообщение в блоге об этом, если вам интересно больше объяснений, но код довольно прост:

class="cropped-images">
  
  • src="http://fredparke.com/sites/default/files/cat-portrait.jpg"/>
    • 
  
  • src="http://fredparke.com/sites/default/files/cat-landscape.jpg"/>
    • li  width: 150px; // Or whatever you want. height: 150px; // Or whatever you want. overflow: hidden; margin: 10px; display: inline-block; vertical-align: top; > li img  max-width: 100%; height: auto; width: auto; > li img.landscape  max-width: none; max-height: 100%; >
    $( document ).ready(function()  $('.cropped-images img').each(function()  if ($(this).width() > $(this).height())  $(this).addClass('landscape'); > >); >);

    Я думаю, что это лучше, чем фоновая альтернатива CSS, потому что изображения являются содержимым, а не «стилем», поэтому они должны храниться на слое HTML. Кроме того, наличие их на CSS вместо HTML повлияет на SEO вашей веб-страницы. Спасибо!

    Хорошей идеей для улучшения этого является добавление $(this).load(function()<. внутри каждого цикла, поэтому jQuery немного ждет, пока изображение загрузится, и получит реальные размеры изображения.

    Если изображение находится в контейнере с отзывчивым шириной:

     class="img-container">  src="" alt=""> 
    .img-container  position: relative; &::after  content: ""; display: block; padding-bottom: 100%; > img  position: absolute; width: 100%; height: 100%; object-fit: cover; > >

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

    У меня была похожая проблема, и я не мог «пойти на компромисс» с фоновыми изображениями. Я придумал это.

     class="container">  src="http://lorempixel.com/800x600/nature">  .container < position: relative; width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */ border: 2px solid #fff; /* just to separate the images */ overflow: hidden; /* "crop" the image */ background: #000; /* incase the image is wider than tall/taller than wide */ >.container img < position: absolute; display: block; height: 100%; /* all images at least fill the height */ top: 50%; /* top, left, transform trick to vertically and horizontally center image */ left: 50%; transform: translate3d(-50%,-50%,0); >//assuming you're using jQuery var h = $('.container').outerWidth(); $('.container').css();

    Использовать CSS: переполнение:

    .thumb  width:230px; height:230px; overflow:hidden >

    Нет, ты прав. Duh. Я просто поднимал существующую высоту с размера изображения ОП, как какой-то сгоревший в пятницу робот.

    Либо используйте div с квадратными размерами с изображением внутри с классом .testimg:

    .test  width: 307px; height: 307px; overflow:hidden > .testimg  margin-left: -76px >

    или квадратный div с фоном изображения.

    .test2  width: 307px; height: 307px; background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50% >

    ОБНОВЛЕНО ТАМ ИЗОБРАЖЕНИЯ

    .test  width: 307px; height: 307px; overflow: hidden > .testimg  margin-left: -76px > .test2  width: 307px; height: 307px; background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50% >
     class="test"> src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" />
    class="test2">

    object-fit: cover будет делать именно то, что вам нужно.

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

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

    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    Как только он в центре, я даю изображение,

    // For vertical blocks (i.e., where height is greater than width) height: 100%; width: auto; // For Horizontal blocks (i.e., where width is greater than height) height: auto; width: 100%;

    Это заставляет изображение получить эффект Object-fit: cover.

    Вот демонстрация вышеуказанной логики.

    Эта логика работает во всех браузерах.

    Исходное изображение

    Исходное изображение

    Вертикально обрезанное изображение

    Вертикально обрезанный

    Горизонтально обрезанное изображение

    Горизонтально подрезанный

    Источник

    Читайте также:  Xmlhttp open php get
    Оцените статью
    © 2024 Программирование