Как сделать чтобы картинка не сжималась css
Перейти к содержимому

Как сделать чтобы картинка не сжималась css

  • автор:

Фото разных размеров, как сделать через css, что бы определенная область фото показыв

Делаю красивый вывод фото, все знают что фото разные, вытянутые по вертикали или по горизонтали или вообще квадратные. Пример фоток Сайт на кохане, жопустим загружаем мы фото, все загрузилось, вставилось сам вывод фото можно изменить через css, но если .class img задать размеры фотке то она будет искажаться, что не есть хорошо. Как можно реализовать вот так, та часть что прозрачная приячиться. и показываем определнную часть которая задана через css по размерам width: 366px; height: 250px; Читать что много есть вариантов. Я реализовал так: у самих фото размер сторон не ниже чем 500px, то есть ни одна сторона не ниже чем 500px css

.apartfoto border: 1px solid #FFDDEF;
width: 366px;
height: 250px;
overflow: hidden;
margin: 10px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
>

.apartfoto img<
width: 366px;
height: 250px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
>

HTML

Может как то по другому можно реализовать задачу ? Вот еще вариант, но работает не ровно по центру и минус в том что бордер закруглены края не работает. вариант с центрованием .apartfoto < width: 366px; height: 250px; overflow: hidden; border: 1px solid #FFDDEF; margin: 10px; -webkit-border-radius: 8px; -o-border-radius: 8px; -html-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; >.apartfoto img < top: 50%; margin-top: -100px; left: 50%; margin-left: -100px; max-width: 500px; max-height: 500px; >

На сайте с 21.10.2013
6 января 2014, 16:00
если у вас кохана, то не мучтесь с CSS и спокойно выводите в шаблонах через

$image->resize($width, $height)
$image->crop($width, $height)

подробнее читайте в мануалах ☝
Автопостинг вконтакте (http://postio.ru/p/5591) — 1 пост всего 0,99 руб! Готовая база тематик!
На сайте с 18.02.2012
7 января 2014, 03:03

jount:
если у вас кохана, то не мучтесь с CSS и спокойно выводите в шаблонах через

$image->resize($width, $height)
$image->crop($width, $height)

подробнее читайте в мануалах ☝

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

На сайте с 25.11.2006
7 января 2014, 08:43
Пример чистой страницы покажите полностью, которая в FF не показывается.
✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE
На сайте с 24.12.2009
7 января 2014, 17:49

l17l, поэтому вам и написали второй вариант. Нужно чтоб картинка обрезалась, а не сжималась. Это называется crop. Ищите у себя в движке нечто подобное или же как сказал jount, используйте:

jount:
$image->crop($width,$height)
Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
На сайте с 18.02.2012
8 января 2014, 04:50

vlad00777:
l17l, поэтому вам и написали второй вариант.
Нужно чтоб картинка обрезалась, а не сжималась. Это называется crop. Ищите у себя в движке нечто подобное или же как сказал jount, используйте:

объяснит суть работы данного способа. то есть через код этот, указываем ширину и высоту, ту которую он будет показывать из картинки, то есть он её не сжимает, не задает параметры картинке, а просто показывает область из картинки ту которую указал в ширину и высоту так ?

На сайте с 21.10.2013
8 января 2014, 09:08

l17l:

то есть через код этот, указываем ширину и высоту, ту которую он будет показывать из картинки, то есть он её не сжимает, не задает параметры картинке, а просто показывает область из картинки ту которую указал в ширину и высоту так ?

Смотрите. Исходные данные: картинка 1200х800 например. Нужно: урезанная картинка 350х350 с сохранением пропорций. 1) С помощью PHP узнаем наибольшую сторону (т.е. ширина это или высота). Например, с помощью такой функции:

$size = getimagesize($filename);

Смотрите, какие размеры картинки есть внутри $size, анализируете их и вычисляете что больше — ширина, или высота. (Т.е. другими словами, картинка горизонтально- или вертикально-ориентирована) 2) Сжимаем картинку

$image->resize(350, NULL); // Если бОльшая сторона — это ширина.
// или
$image->resize(NULL, 350); // Если бОльшая сторона — это высота.
На этом шаге получаем картинку, готовую к обряду обрезания. 3) Делаем собственно обрезание (crop):

$image->crop(350,350);

Итого можете использовать в цепочке:

print $image->resize(350, NULL)->crop(350,350);

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

print $image->resize(350, 350, Image::INVERSE)->crop(350,350);

Надеюсь, чем-то помог 🙂
На сайте с 18.02.2012
8 января 2014, 10:24

jount:
Смотрите.

Исходные данные: картинка 1200х800 например.
Нужно: урезанная картинка 350х350 с сохранением пропорций.

1) С помощью PHP узнаем наибольшую сторону (т.е. ширина это или высота). Например, с помощью такой функции:

$size = getimagesize($filename);

Смотрите, какие размеры картинки есть внутри $size, анализируете их и вычисляете что больше — ширина, или высота. (Т.е. другими словами, картинка горизонтально- или вертикально-ориентирована)
2) Сжимаем картинку

$image->resize(350, NULL); // Если бОльшая сторона — это ширина.
// или
$image->resize(NULL, 350); // Если бОльшая сторона — это высота.

На этом шаге получаем картинку, готовую к обряду обрезания.
3) Делаем собственно обрезание (crop):

$image->crop(350,350);

Итого можете использовать в цепочке:

print $image->resize(350, NULL)->crop(350,350);

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

print $image->resize(350, 350, Image::INVERSE)->crop(350,350);

Надеюсь, чем-то помог 🙂

так по идее скрипт должен сначала 1200х800 этот размер уменьшить на тот что мне нужен 500×500, ну и по сути он обрежет лишнее, а потом уже что бы из этих данных покащывалась область та что мне нужна 366×250 так как если он будет показывать область из 1200х800, то то там ничего видно не будет. вот пример: фотка 1200×960, если сделать что бы из неё область та что мне надо показывалась, то вид будет такой. можно сделать что бы скрипт обрезал фото, но так будет не красиво, он вырежет область из большой фотки 366×250, ну и будет видно выше на картинки что он будет показвать что то не понятное, тут надо делать что бы скрипт уменьшал фото до 500×500 ну и обрезал за одно если будет лишнее, так как фото все разные что по вертикали что по горизонтали и придеться скрипты обрезать, нужно что бы как бы он от середины отсчитывал что лишнее и вырезал, допустим загружаем и скрипт делает фотку 1200×960 на 500×500, можно меньше но не то будет все равно, и уже исходя из 500×500 размера, показываем область, 366×250 и вот пример: а если сделать так что бы скрипт уменьшал по ширине, до 366 и если есть лишка в длине то что бы срезал и меньшал до 250, то будет так. у всех фотографиий восновном все самое ценное середина, допустим взять фотку с человеком, обычно человек по середине.

Размеры и позиционирование изображений на веб-страницах

Вспомним, что для добавления файлов изображений на веб-страницу используется одиночный тег с атрибутами:

Атрибуты ширины и высоты можно опустить, если размер задается с помощью одноименных свойств CSS.

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

Размер изображения больше ширины родительского блока

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

img src="linuxhistory.png"  alt="История Linux"  width="100%" height="auto">

Ширина изображения 100%, высота - auto

Значение auto для height заставляет высоту изображения масштабироваться пропорционально ширине.

То же самое через css-правило:

img { width: 100%; height: auto; }img src="linuxhistory.png" alt="История Linux">

Или встроенный в элемент стиль:

img src="linuxhistory.png" alt="История Linux" style="width:100%;height:auto">

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

Ширина изображения в px. Выход за границы блока на узких экранах

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

Ширина изображения в %. Растяжение на широких экранах

Наиболее простым способом решения проблемы является использование css-свойства max-width со значением в процентах и с одновременным указанием размера изображения в пикселях в атрибутах элемента img .

Свойство max-width в сочетании с атрибутами width и height

В этом случае max-width растягивает картинку на всю ширину внешнего блока при условии, что размер этого блока не превышает размера изображения. Когда это не так, срабатывают значения атрибутов длины и ширины тега.

Ранее (см. урок 3), когда речь шла о блочных и строчных элементах, то для выравнивая отдельно стоящего изображения по центру приводился пример помещения его в блок div или figure . Однако мы можем сделать само изображение блочным элементом с помощью объявления display: block . После этого центрировать его с помощью margin: auto .

img { display: block; margin: 0 auto; max-width: 100%; height: auto; }img src="gnu.png" alt="Логотип GNU" width="491" height="480">

Изображение как блочный элемент и ее центрирование с помощью margin

Бывает, что маленькие картинки предпочитают обтекать текстом слева или справа. Для этого используют свойство float со значением left или right . В случае float: left элемент будет «уплывать» налево. Другие элементы будут оказываться справа от него.

Обтекание изображений текстом слева и справа. Свойство float

Здесь может потребоваться решать две проблемы:

  1. Бывает необходимо, чтобы только конкретный абзац обтекал изображение.
  2. На узких экранах обтекание должно смениться на расположение картинки и текста друг под другом. Иначе получается слишком мало места для текста сбоку от изображения, и верстка выглядит плохо.

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

p style="clear:left;">Самым известным …/p>

Абзац, который не обтекает слева. Свойство clear

Объявление clear: left заставляет элемент перестать обтекать объекты, расположенные с левой стороны. Вариант clear: both – с обоих сторон. В нашем примере значение both дало бы тот же результат.

Чтобы убрать обтекание изображений на малых экранах, потребуется использовать @media-запрос, в котором значения свойств будут меняться. Однако если мы до этого оформляли элемент через атрибут style тега, то такой inline-стиль (строчный) имеет приоритет над внешней или внутренней таблицей стилей.

Поэтому в нашем случае понадобится использовать команду !impotant :

@media (max-width: 599px) { img { float: none!important; padding: 0!important; display: block; margin: 0 auto; max-width: 100%; height: auto; } }

Изменение значения float на узких экранах

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

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

X Скрыть Наверх

Введение в веб-разработку и создание сайтов

Как обрезать по краям картинку шапки

mkrhst

mkrhst

12.12.2013 16:08 2 769

как обрезать по краям картинку шапки при разных расширениях монитора.
То есть есть картинка с шириной 1950 px . надо поставить ее в шапку сайта на всю ширину.Но так как большинство мониторов 1280 px, то мне надо чтоб картинка не сжималась по ширине,а обезалась по краям,находясь по центру(в равной степени обрезалась и справа и слева)

Ответы на пост (4) Написать ответ

HTML & CSS: как не надо

Не задавайте контейнерам ширину, равную брикпойнтам

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

Как это увидеть? #

Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:

Контейнер с фиксированной шириной на мобильных

Пример с фоном ширину страницы

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

 class="panorama">  class="panorama__img" src=". " alt=". "> 

Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:

.panorama  position: relative; /* растягиваем по ширине окна */ width: 100vw; /* скрываем всё, что не поместилось в экран */ overflow: hidden; /* центрируем обёртку */ left: 50%; transform: translate(-50%); /* центрируем картинки */ display: flex; justify-content: center; > .panorama__img  /* фиксируем ширину картинки */ width: 982px; /* отключаем max-width, если он было задано выше */ max-width: none; >

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

Пример с картинкой на ширину страницы с горизонтальной прокруткой на десктопе

Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.

Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .

Пример с картинкой на ширину страницы без горизонтальной прокрутки

Горизонтальная прокрутка пропала, всё работает как надо.

Итого

Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *