Как вписать картинку в блок css

Как правильно вписать большую картинку в маленький блок целиком на CSS/SCSS?

В макете есть такой блок: Тут две строки по 4 примера работ. Решил сделать на flex одну строку, чтоб по кнопке можно было догружать еще работы, но пока до JS не дошел. Нужно вписать картинку любого размера в квадрат. Есть например картинка размером 740х740px и мне надо целиком вписать ее в квадрат 480х480px В данном случае object-fit обрезает большую картинку примера работы, а я хочу уменьшить ее масштаб а не обрезать. Возможно ли это?

Отслеживать

3,563 8 8 золотых знаков 12 12 серебряных знаков 39 39 бронзовых знаков

задан 5 мая 2021 в 16:49

Konstantin_SH Konstantin_SH

2,876 2 2 золотых знака 21 21 серебряный знак 41 41 бронзовый знак

Вписать картинку в блок

Есть блок заданых размеров и нужно что бы в него вставлялись картинки(именно тегом img) так что бы если например картинка вертикальная она не растягивалась на всю ширину блока, а занимала нужную ей ширину и высоту по блоку. И если нужно например уменьшалась и вписывалась в блок. Это можно сделать средствами css или только с применение js/ Если есть какие то примері или сілки где можно узнать буду благодарен

Отслеживать

задан 4 июл 2018 в 12:29

Влад Лесной Влад Лесной

300 1 1 золотой знак 4 4 серебряных знака 16 16 бронзовых знаков

Для img пропишите height:100%; width: auto; Должно решить вопрос, если я правильно понял

4 июл 2018 в 12:36

Картинок в блоке может быть несколько?

4 июл 2018 в 13:26

3 ответа 3

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

var imgs = $('.box img'); imgs.each(function()< var item = $(this).closest('.box'); item.css(< 'background-image': 'url(' + $(this).attr('src') + ')', 'background-position': 'center', '-webkit-background-size': 'cover', 'background-size': 'cover', >); $(this).hide(); >);

Отслеживать

ответ дан 4 июл 2018 в 12:44

22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков

Как в CSS вписать картинку (именно img) в блок?

Многие для вписывания картинки в блок используют background-image. Но есть один метод, который безболезненно и (почти) на всех браузерах поможет вам без лишних заморочек вписать img в div.

Делается этот хитрый трюк через padding-top и абсолютное позиционирование. Родительскому элементу указываем:

1. height: 0;
2. padding-top: 130%;
3. position: relative;
4. display: block;

1. position: absolute;
2. top: 50%;
3. left: 50%;
4. transform: translate(-50%, -50%);
5. max-height: 100%;
6. max-width: 100%;

В итоге картинка вытягивается по блоку с 0 высотой, а также изменяя padding-top (на 100% картинка вписывается в квадрат) мы можем изменять фигуру вписывания. А также можем через object-fit: cover сделать картинку замещаемой (но для ie11 нужно использовать полифил).

Результат на CodePen (правда там результат с object-fit: cover, но обратно превратить результат в вмещаемую картинку проще).

What is greater-than sign (>) selector in CSS?

The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. It looks only one level down the markup structure and not further deep down. Elements which are not the direct child of the specified parent is not selected.

Syntax:

element > element < // CSS Property >

Example-1: This example describes the greater than > selector.

CSS element > element Selector
color:white;
background: green;
CSS element > element Selector
< div >Searching algorithms
< li >Binary search
< li >Linear search
< p >Sorting Algorithms
< li >Merge sort
< li >Quick sort

Output:

Example 2: This example describes the greater than > selector.

CSS element > element Selector

color:white;
background: green;
color: green;
CSS element > element Selector
< div >Searching algorithms
< li >Binary search
< li >Linear search
< div >Sorting Algorithms
< li >Merge sort
< li >Quick sort

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out — check it out now!

Last Updated : 30 Jul, 2021

Like Article