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

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

  • автор:

Background-position обрезает картинку. Как сохранить размер?

Здравствуйте, суть вопроса в том, что я использую узкую картинку, которую нельзя обрезать. Для параметра background применяю: background-position: center; сам участок css выглядит так:
.slides-container .slide-item background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Когда я меняю «диагональ» изменяя окно браузера, я могу увидеть всю картинку. На «квадрате» он ее растягивает и обрезает.
Как сохранить все свойства картинки, что описаны. Но при этом не обрезать картинку в независимости от диагонали экрана.
Если это нельзя реализовать, то хорошо будет даже не универсальное решение.
P.S. Я пробовал менять значение background-position на auto и другие, но это все не подходит.
P.S.S Внесу уточнение. Я понимаю, что картинку либо растянуть либо обрезать ибо пропорции. Но меня интересует другой вариант. Как заставить картинку или сам сайт считать что диагональ в пропорции картинки это и есть размер страницы.
Пример, у нас есть картинки 16:9 мы сохраняем пропорции и считаем что страница будет заканчиваться по окончанию картинки.
Точнее нам для отображения важна только ширина, на основании пропорции картинки будет рассчитана высота страницы.

  • Вопрос задан более трёх лет назад
  • 11411 просмотров

css обрезка картинок

нужно обрезать и вставить обычную, горизонтальную и вертикальную картинки в div так, что бы они полностью заполняли собой div не искажаясь (масштабировать по меньшей стороне, а лишнее обрезать) у меня всё работает, кроме обработки квадратной картинки, она должна показыватья почти вся, а видна только ее половина

.img_wrap < width: 300px; height: 200px; overflow: hidden; /*line-height: 200px;*/ /*text-align: center;*/ border-style: solid; >.img_wrap img
  
vertical
horizontal
normal

Отслеживать

задан 12 окт 2017 в 11:28

173 1 1 золотой знак 3 3 серебряных знака 11 11 бронзовых знаков

2 ответа 2

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

.img_wrap < width: 300px; height: 200px; border-style: solid; >.img_wrap img
  
vertical
horizontal
normal

Отслеживать

ответ дан 12 окт 2017 в 21:20

1,108 1 1 золотой знак 7 7 серебряных знаков 13 13 бронзовых знаков

Как с помощью CSS сделать обрезку картинки до определенного размера?

Добрый день уважаемые люди!
У меня такой вопрос:
Допустим есть блок 200х500 пкс, там умещается картинка 200х300 пкс(сверху), и текст 200х300 пкс (соответственно снизу).
Вот заливаю я картинку на сервер, ставлю img src() + класс, и картинка чудесным образом обрезается до размеров 200х300 пкс, и нет никаких белых полей по бокам и сверху/снизу, не растянута и не сжата(т.е. соотношение тоже самое как и большой картинки).
Как это можно реализовать? css или js?

  • Вопрос задан более трёх лет назад
  • 77317 просмотров

Курсы javascript

Ситуация такая, есть фотки, которые пропорционально уменьшаются до нужного размера по ширине, но также есть ещё некая высота блока превышая которую картинка должна «обрезаться».
У меня картинка прижимается по верху и из-за этого если картинка после пропорционального уменьшения не совсем чётко помещается, то бывает, что отрезается «полезная» часть снизу.
Что сейчас:
http://clip2net.com/s/1Lr0X

Что нужно:
http://clip2net.com/s/1LrmT
*центрируем фотку по вертикали, всегда какой бы она не была по высоте и обрезаем её до нужного размера но симметрично сверху и снизу;
**бекграунды с background-position не совсем подходят, придумать бы позиционирование и центрирование с обрезанием обычных img в блоках..

Реально ли такое осуществить?

Последний раз редактировалось dr_gluk, 02.04.2012 в 19:11 .
02.04.2012, 19:31
Регистрация: 04.12.2009
Сообщений: 579

1. устанавливаешь у блока overflow: hidden;
2. получаешь высоту картинки
3. получаешь высоту блока.
4. из высоты картинки вычитаешь высоту блока и делишь на 2
5. поднимаешь картинку на полученное из п.3 значение

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

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