Css изображение не сжималось

Управление размерами изображений в CSS

Сохранение соотношения сторон предотвращает искажение изображений из-за растяжения или сжатия. Работая с CSS, вы, вероятно, рано или поздно попадете в ситуацию, когда вам будет нужно сохранить исходное соотношение сторон изображения. Очень часто для решения этой проблемы используется CSS-свойство background-image. Есть и более современный подход – это свойство object-fit.

В этом руководстве мы поговорим о таких значениях object-fit, как fill, cover, contain, none и scale-down. Мы обсудим, как они влияют на изображение в целом, а также как с их помощью можно обрезать и масштабировать изображения. Кроме того, вы изучите свойство object-position и увидите, как оно может смещать изображения.

Требования

• Чтобы выполнить этот мануал, вам нужно знать, что такое свойства и значения CSS.
• Вы должны уметь использовать декларации CSS, встроенные в свойство style.
• Редактор кода.
• Современный веб-браузер, поддерживающий object-fit and object-position.

Стандартное поведение изображений

В этом руководстве мы рассмотрим следующий код:

Исходная ширина этого изображения – 1200 пикселей, высота – 674 пикселей. С помощью атрибута img этим параметрам были присвоены значения 600 и 337 – это половина исходных размеров с сохранением соотношения сторон.

Давайте теперь предположим, что у нас есть макет, который ожидает, что изображения будут иметь ширину в 300 пикселей и высоту в 337 пикселей:

В браузере этот код покажет следующий результат:

Полученное изображение больше не сохраняет исходное соотношение сторон и кажется визуально сжатым.

Как работает object-fit: fill

fill – это начальное значение object-fit. Оно не сохраняет исходное соотношение сторон.

Этот код выдаст в браузере следующий результат:

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

Как работает object-fit: cover

Значение cover сохраняет исходное соотношение сторон изображения, но изображение занимает все доступное пространство.

Данный код покажет в браузере такой результат:

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

Как работает object-fit: contain

Значение contain сохраняет исходное соотношение сторон, но при этом изображение не может выходить за пределы доступного пространства.

Этот код выдаст в браузере следующий результат:

В некоторых ситуациях object-fit: contain приводит к тому, что изображение не может заполнить все доступное пространство. Как вы видите в данном примере, над и под изображением есть пустое горизонтальное пространство, потому что заявленная доступная высота больше, чем высота масштабированного изображения.

Как работает object-fit: none

Значение none вообще никак не изменяет размер изображения.

Этот код выдаст в браузере следующий результат:

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

Как работает object-fit: scale-down

Значение scale-down будет отображать картинку либо как contain, либо как none – в зависимости от того, что именно выдаст наименьшее изображение.

Этот код выдаст в браузере следующий результат:

В этом примере изображение было уменьшено по принципу contain.

Как работают свойства object-fit и object-position

Если в результате object-fit выдает обрезанное изображение, оно по умолчанию будет центрировано. Для изменения точки фокуса можно использовать свойство object-position.

Вернемся к примеру object-fit: cover.

Теперь давайте изменим положение видимой части изображения по оси X, чтобы показать правый край изображения:

Этот код покажет следующий результат:

В этом примере фрагмент изображения с черепахой вырезан.

А теперь давайте посмотрим, что произойдет, если указать позицию за пределами доступного пространства:

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

Заключение

В этой статье мы рассмотрели доступные значения свойств object-fit и object-position.

Прежде чем использовать свойство object-fit в своем проекте, убедитесь, что ваша целевая аудитория пользуется браузерами, которые его поддерживают.

Источник

Картинка не уменьшается в адаптиве

Поставил блоку slider шириной 960px c картинкой width:100%;
height: auto; но картинка упорно не хочет уменьшаться в размерах при адаптиве, не могу понять в чем дело?
да можно прописывать в медиа ширину в процентах но это тоже должно работать по идее.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

 html lang="ru"> head> meta charset="utf-8"> meta name="viewport" content="width=device-width"> link rel="stylesheet" type="text/css" href="css/style.css"> title>hello/title> /head> body> div id="wrapper"> div id="header"> header> div class="logo"> img src="img/1.png" title="logo" alt="logo">/div> div class="nav"> ul> li class="class1">a href="#">О компании/a>/li> li class="class2">a href="#">Спецпредложения/a>/li> li class="class3">a href="#">Контакты/a>/li> /ul> /div> div id="contacts"> ul> li class="item1">a href="#">infohome@yahoo.com/a>/li> li class="item2">Звоните нам/li> li class="item3"> +7(931) 2832847/li> li class="item4">Оставьте номер и мы вам перезвоним/li> /ul> /div> div class="slider"> img src="img/slider.jpg" width="960" title=Texnik" alt="Texnik"> div class="slider_text"> span class="text">Уникальное br> спепредложение/span> /div> /div> /header> /div> div class="container"> aside> ul> li class="clas1">Спецтехника/li> li>Аренда техники/li> li>Финансовые решения/li> li>Экскаваторы/li> li>Погрузчики/li> li>Автокраны/li> /ul> /aside> section> h1>Несколько слов о нас/h1> p> /p> p>/p> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quis.Blanditiis, quis quod aut, quo eligendi libero ipsa magnam eius.Facere mollitia iusto perferendis in consequuntur voluptates debitis adipisci hic!Sit minima sed porro, necessitatibus iste laudantium sunt odio doloremque.Eos eius possimus facilis accusamus soluta, explicabo temporibus eveniet sit./p> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quis.Blanditiis, quis quod aut, quo eligendi libero ipsa magnam eius.Facere mollitia iusto perferendis in consequuntur voluptates debitis adipisci hic!Sit minima sed porro, necessitatibus iste laudantium sunt odio doloremque.Eos eius possimus facilis accusamus soluta, explicabo temporibus eveniet sit./p> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quis.Blanditiis, quis quod aut, quo eligendi libero ipsa magnam eius.Facere mollitia iusto perferendis in consequuntur voluptates debitis adipisci hic!Sit minima sed porro, necessitatibus iste laudantium sunt odio doloremque.Eos eius possimus facilis accusamus soluta, explicabo temporibus eveniet sit./p> /section> /div> /div> footer> div class="logo2"> img src="img/logo2.png" alt="logo2" title="logo2">/div> div>®Все права защищены 2009-2013br> Любое копирование материалов с сайта запрещено/div> div class="contacts2"> Звоните нам br> +7(351) 2832847 p>+7 908 055 88 11/p> /div> /footer> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273

*{margin:0; padding:0;} h1 { padding:10px; } html, body{height:100%; font-family:'Myriad Pro'; font-size:100%;} ul{list-style:none;} a{text-decoration:none; } a:active { color:red;} #wrapper { position:relative; max-width: 960px; margin: 0 auto; } .container { overflow:hidden; } .logo { margin-left: 30px; margin-top: 10px; width:200px; height:100px; float:left; } .nav { float:left; width: 400px; height:50px; padding-top: 50px; } .nav ul li { display:inline-block; padding-left: 20px; line-height: 20px; } .nav>ul>li>a:hover { color:red; } #contacts { float:left; } aside { width: 200px; height: 580px; float: left; } section { overflow: hidden; } .clas1 { padding-bottom:20px; text-transform:uppercase; } section { padding:10px 0; } section { margin-left:150px; min-height:580px; padding:10px; } .class3 { border-left: 2px solid black; } .slider { width:100%; height: auto; border: 3px solid #ede8e8; border-radius: 3px; box-shadow: 0px 2px 3px rgba(0,0,0, .2); /*clear:both;*/ } .slider_text { position:absolute; top:50%; left:10%; } .slider_text .text{ color:white; font-size:18px; text-transform: uppercase; background-color: rgba(0,0,0, 0.5); } #header { position:relative; width:960px; height: 410px; } footer { position:relative; width: 960px; height:100px; margin: 0 auto; } footer div{ position:absolute; left:0; bottom:0; } .logo2 { position: absolute; height: 50px; top:0; } .contacts2 { position:relative; width:500px; height:40px; float:right; padding-top: 60px; } .contacts2 p { display: inline; padding-left: 20px; } .item1 { font-size: 1em; } .item3 { color:red; font-size: 1.5em; font-family: bold; } @media all and (max-width: 700px) { #contacts { float:none; display:block; } #nav { float:none; display:block; } .logo { float:none; display:block; } @media all and (max-width: 600px) { #contacts { float:none; display:block; } #nav { float:none; display:block; } .logo { float:none; display:block; } }

Добавлено через 5 часов 47 минут
Есть кто нибуть?

Источник

Как сделать, чтобы картинка не обрезалась при масштабировании?

Есть вот такой пример, как сделать, чтобы уменьшая ширину окна браузера с 1920 до 768px картинка не обрезалась справа, а была полностью как по ширине, так и по высоте? В сети полно примеров, как сделать адаптивную картинку, но учитывая еще и текст поверх — не получилось у меня.
https://codepen.io/anon/pen/mjGmpO?editors=1100

Простой 4 комментария

Антон,

snap44,

Адаптивная картинка и адаптивный фон разные вещи.
Если бы была картинка, я бы сказал, что стоит дать ей свойство max-width: 100% , но тут используется фон. Сразу и в лоб — блок, к котором применяется background-image должен иметь свойство background-size: contain . Вот только делать этого очень не советую, так как у блока появятся «уши». Это когда есть незанятое пространство. В данном случае пострадает текст в первую очередь, который «лежит» поверх фона.
Разумнее использовать background-size: cover . Тогда картинка будет подстраиваться под размер области, в которой она является фоном.

Источник