Как разместить картинку css

Как поместить картинки в блок

Здравствуйте, ребята. Мне нужно поместить картинки товаров в блок 280×200, так, чтобы блок полностью заполнился и картинки не поменяли свои пропорции, если пропорции мешают, то обрезать, то есть не надо, чтобы картинка растягивалась, а просто обрезалась. Я пытался разными способами, но не получилось.

Отслеживать
задан 11 мар 2017 в 18:20
129 1 1 золотой знак 1 1 серебряный знак 10 10 бронзовых знаков
11 мар 2017 в 18:27

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

1) Устанавливай картинку фоном и задай ей размер cover:

.block < width: 280px; height: 200px; background-image: url(https://www.gravatar.com/avatar/0e701b6571349036da776281d23d065a?s=300&d=identicon&r=PG&f=1); background-size: cover; background-position: center; border: 2px solid #000; >

2) Вариант с позиционированием:

.block < position: relative; width: 280px; height: 200px; border: 2px solid #000; overflow: hidden; >.block > img

Но с этим вариантом морока, так как ты не знаешь по ширине ровнять на всю или по высоте.

Если это идею развивать, то можно с помощью PHP определять размер картинки: картинка больше по ширине или высоте. Если картинка больше по ширине, то устанавливать класс .imgh , и этот класс будет устанавливать размер картинке , а если больше высота, то ставить .imgv , который будет иметь размеры .

.block < position: relative; width: 280px; height: 200px; border: 2px solid #000; overflow: hidden; >.block > img < width: 100%; height: auto; >.block > img.imgh < width: auto; height: 100%; >.block > img.imgv

Берём картинку, где ширина больше высоты
 
И видим, что по высоте картинка не полная:
 
 
 
Для нормального определения, нужно определять в PHP, что больше, ширина или высота
 
Если ширина больше, то устанавливаем класс с размерами 
  

А вообще, вам мой совет, при добавлении картинки товара, в PHP сделайте, чтобы картинка ужималась и обрезалась до нужного размера. Тогда и подстраивать ничего не нужно будет, и сайт будет меньше загружаться по времени

Как вставить картинку в HTML

Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег . Данный тег является одиночным и строчным, а также имеет два обязательных атрибута src и alt :

При помощи атрибута src указывается путь к картинке. При помощи атрибута alt указывается альтернативный текст для картинки. Если картинка по каким либо причинам не отобразится на веб-странице, то вместо нее вы увидите альтернативный текст:

Также для изображения рекомендуется указывать ширину и высоту, это позволит браузеру быстрее загружать изображения на веб-страницу. Указывать ширину и высоту можно при помощи каскадных таблиц стилей, либо при помощи атрибутов width (ширина) и height (высота):

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

Как записать путь к изображению

Если изображение и файл, в котором прописан путь к этому изображению, лежат в одной папке:

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

Если картинку перенести в папку img:

то путь к ней будет начинаться с названия папки, в которой она находится:

Если файл index.html поместить в папку files:

то путь к изображению будет начинаться с конструкции ../ :

Если папку files, содержащую файл index.html положить еще в одну папку, то путь станет таким:

Всплывающая подсказка

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

title="Автомобиль">

Если навести курсор на картинку, то появится всплывающая подсказка:

background — position

Фоновая картинка подчиняется этому свойству и занимает нужную позицию.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. Пример
3. Как пишется
   1. Ключевые слова
   2. Пиксели или другие единицы измерения длины
   3. Проценты
   1. Алёна Батицкая советует

   Контрибьюторы:

   Обновлено 20 декабря 2021

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   При помощи свойства background — position можно управлять положением фоновой картинки внутри элемента.

   Если фоновая картинка ( background — image ) меньше, чем элемент, и автоматическое повторение фона ( background — repeat ) отключено, то по умолчанию она расположится в левом верхнем углу.

   Пример

   Скопировать ссылку «Пример» Скопировано

    div class="element">div>    Скопировать Скопировано Не удалось скопировать   

    .element  background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat;> .element  background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat; >    Скопировать Скопировано Не удалось скопировать   

   Как видно в примере, маленькая картинка с персонажем располагается в левом верхнем углу. Но по логике это изображение нам нужно расположить в правом нижнем углу.

   Для этого мы изменим значение свойства background — position на нужное нам: 100 % 100 % или bottom right . Они равнозначны.

   Позиция в процентах:

    .element  background-position: 100% 100%;> .element  background-position: 100% 100%; >    Скопировать Скопировано Не удалось скопировать   

   Или при помощи ключевых слов:

    .element  background-position: bottom right;> .element  background-position: bottom right; >    Скопировать Скопировано Не удалось скопировать   

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Ключевые слова

   Скопировать ссылку «Ключевые слова» Скопировано

   Доступны слова center , bottom , left , right . Их можно комбинировать, например: left center — по центру левой стороны; right bottom — правый нижний угол. Если хотим расположить картинку по центру по горизонтали и вертикали, второе слово center можно опустить.

   Левый верхний угол:

    .element  background-position: left top;> .element  background-position: left top; >    Скопировать Скопировано Не удалось скопировать   

    .element  background-position: center;> .element  background-position: center; >    Скопировать Скопировано Не удалось скопировать   

   По центру по горизонтали и у нижнего края:

    .element  background-position: center bottom;> .element  background-position: center bottom; >    Скопировать Скопировано Не удалось скопировать   

   Пиксели или другие единицы измерения длины

   Скопировать ссылку «Пиксели или другие единицы измерения длины» Скопировано

   Можно указать конкретное положение картинки в блоке.

   10 px от левого края и 150 px от верхнего края:

    .element  background-position: 10px 150px;> .element  background-position: 10px 150px; >    Скопировать Скопировано Не удалось скопировать   

   1 rem от левого края и по центру между верхом и низом:

    .element  background-position: 1rem;> .element  background-position: 1rem; >    Скопировать Скопировано Не удалось скопировать   

   15 единиц ширины от левого края и 25 единиц высоты от верха:

    .element  background-position: 15vw 25vh;> .element  background-position: 15vw 25vh; >    Скопировать Скопировано Не удалось скопировать   

   Проценты

   Скопировать ссылку «Проценты» Скопировано

   Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки. Сдвиг картинки на 50 % , то есть на половину этой разницы, центрирует её по соответствующей оси. Значение 0 % 0 % ставит картинку в левый верхний угол, а 100 % 100 % — в правый нижний.

   Правый нижний угол:

    .element  background-position: 100% 100%;> .element  background-position: 100% 100%; >    Скопировать Скопировано Не удалось скопировать   

    .element  background-position: 50% 50%;> .element  background-position: 50% 50%; >    Скопировать Скопировано Не удалось скопировать   

   Слева 15%, сверху 5%:

    .element  background-position: 15% 5%;> .element  background-position: 15% 5%; >    Скопировать Скопировано Не удалось скопировать   

   Если развернуть запись 15 % 5 % подробнее, то станет понятнее, как работают проценты в этом случае:

   • Слева от картинки 15% свободного места, а справа — оставшиеся 85%.
   • Над картинкой 5% свободного места, а под ней — оставшиеся 95%.

   Подсказки

   Скопировать ссылку «Подсказки» Скопировано

   �� Свойство положения фона не наследуется.

   �� Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали.

   �� Значение по умолчанию — 0% 0% (левый верхний угол).

   �� Если указано только одно значение, то второе подставляется автоматически и равняется 50 % . То есть значение 100 % расположит картинку по центру правого края.

   �� Если картинка больше блока, то разница их размеров, от которой отсчитываются проценты, оказывается отрицательной, поэтому они сдвигают картинку не вправо и вниз, а влево и вверх. Но 50 % 50 % и в этом случае совмещает центр картинки с центром элемента, а 100 % 100 % — правый нижний угол картинки с правым нижним углом элемента.

   �� Если картинка занимает всё пространство блока, то background — position с ключевыми словами или в процентах не возымеет никакого действия (проценты будут отсчитываться от нуля). Но его принято указывать, чтобы в случае замены картинки новое изображение располагалось по центру блока.

   �� Изменение положения фона можно анимировать при помощи свойства transition ��

   На практике

   Скопировать ссылку «На практике» Скопировано

   Алёна Батицкая советует

   Скопировать ссылку «Алёна Батицкая советует» Скопировано

   �� В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов стоит указывать background — position : center или background — position : 50 % 50 % — в качестве подстраховки от фатальной поломки вёрстки.

   �� Можно встретить такую запись: background — position : right 20px bottom 10px; . В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в двадцати пикселях от правого края и в десяти пикселях от нижнего края.

   �� Помимо перечисленных вариантов можно использовать функцию calc ( ) для указания более гибкого значения.

   Читать:

   Где найти субтитры для видео приложение android