Среда, 09 Января 2013 16:25

Пропорции картинки CSS

Written by 
Оцени эту запись
(17 Голоса)

В данной статье мы рассмотрим пропорции картинки, как изменять размеры картинки, сохраняя ее пропорции, и как изменить пропорции картинки по размерам родительского блока.

 

При вставке картинки через тег <img> на HTML страницу, мы получаем ее с оригинальными размерами. Но иногда эти размеры нужно менять под разные условия. При этом можно сохранять ее пропорции, чтобы картинка не искажалась. Или наоборот растянуть ее на весь размер родительского элемента.

 

В CSS3 есть много методов работы с фоновыми изображениями для блоков. Но в данной статье мы рассматриваем именно картинку вида:

 

<img alt="" src="/images/stories/article_list_img2.jpg" />

 

 

У этой картинки такие размеры: высота 100px, ширина - 120px. Если ее вставить в блок с такими же размерами, она будет выглядеть корректно:

 

<div style="border: 1px solid blue; width: 120px; height: 100px;"><img alt="" src="/images/stories/article_list_img2.jpg" /></div>

 

 

 

Но чаще нам приходится подстраивать размеры картинки под размеры блока.

 

Изменение размера картинки по размеру родителя с сохранением ее пропорций

 

Первый 2 случая, который мы рассмотрим - это размеры родительского блока 100*100 и 120*120. Нам нужно чтобы в первом случае картинка заполнила блок, а лишние края ее были обрезаны:

 

<div style="border: 1px solid blue; width: 100px; height: 100px; overflow: hidden;"><img alt="" src="/images/stories/article_list_img2.jpg" style="min-width: 100px; min-height: 100px;" /></div>

 

 

 

Как видим, картинка не изменила своих пропорций, а лишнее от нее обрезалось. Для этого нам нужны были такие стили:

 

div {

width: 100px; /*задаем фиксированные размеры родительскому блоку*/

height: 100px;

overflow: hidden; /*скрываем все, что в блок не помещается по его размерам*/

}

 

img {

min-width: 100px;

min-height: 100px; /*задаем минимальную ширину и высоту, картинка подстроится под нужные размера блока, пропорции сохраняются*/

}

 

Во втором случае блок больше, чем картинка:

 

<div style="border: 1px solid blue; width: 120px; height: 120px;"><img alt="" src="/images/stories/article_list_img2.jpg" style="max-width: 120px; max-height: 120px;" /></div>

 

 

 

Картинка большей стороной поместилась в блок. Пропорции также остались стабильными.

 

Изменение размера картинки до определенный значений

 

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

 

Сделаем нашу картинку шириной 200px:

 

<img alt="" src="/images/stories/article_list_img2.jpg" style="width: 200px;" />

 

 

 

Или наоборот - сделаем высоту картинки 50px:

 

<img alt="" src="/images/stories/article_list_img2.jpg" style="height: 50px;" />

 

 

 

В обоих случаях пропорции картинки сохранились.

 

Изменение пропорций картинки под родительский элемент

 

В данном случае, например, есть блок 150px*150px и нам нужно в него встроить нашу картинку, чтобы она его полностью заполнила. Для этого нужно ей задать высоту и ширину равные либо размерам блока в пикселах или же 100%:

 

 <div style="border: 1px solid blue; width: 150px; height: 150px;"><img alt="" src="/images/stories/article_list_img2.jpg" style="width: 150px; height: 150px;" /></div>

 

 

 

<div style="border: 1px solid blue; width: 150px; height: 150px;"><img alt="" src="/images/stories/article_list_img2.jpg" style="width: 100%; height: 100%;" /></div>

 

 

 

 

Пропорции картинки изменились, но она полностью заполнила родительский блок.

 

 

 

 

Additional Info

Комментарии  

 
+1 #7 woodsleaf 15.02.2017 23:27
При обрезании, не хватает центровки.
В данном случае все понятно голова слева, а если наоборот?
 
 
0 #6 AnSW3R 06.04.2016 14:09
Спасибо :roll:
 
 
0 #5 Андрей 18.08.2015 16:02
Спасибо помогло
 
 
+1 #4 Ольга 31.03.2015 20:57
Очень помогло, как говорится во время! Спасибо!
 
 
0 #3 User 13.03.2015 11:28
на 4 картинке с верху
 
 
0 #2 User 13.03.2015 11:27
что нужно дописать в этот код, что бы еще и по вертикале было пл центру?
 
 
+1 #1 Анастасия 02.02.2015 10:56
Спасибо огромное, эта статья спасла меня!
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов