CSS Отображает изображение, измененное по размеру и обрезанное
-
20-08-2019 - |
Вопрос
Я хочу показать изображение с URL-адреса определенной ширины и высоты, даже если оно имеет другое соотношение размеров.Поэтому я хочу изменить размер (сохраняя соотношение), а затем обрезать изображение до нужного мне размера.
Я могу изменить размер с помощью html img
собственность, и я могу разрезать с background-image
.
Как я могу сделать и то, и другое?
Пример:
Этот образ:
Имеет размер 800x600
пикселей, и я хочу показать, как изображение 200x100
пиксели
С img
Я могу изменить размер изображения 200x150px
:
<img
style="width: 200px; height: 150px;"
src="http://i.stack.imgur.com/wPh0S.jpg">
Это дает мне вот это:
<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">
И с background-image
Я могу вырезать изображение 200x100
пиксели.
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Дает мне:
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>
Как я могу сделать и то, и другое?
Измените размер изображения, а затем обрежьте его так, как я хочу?
Решение
Вы могли бы использовать комбинацию обоих методов, например.
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
<div class="crop">
<img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
</div>
Вы можете использовать отрицательный margin
чтобы переместить изображение в пределах <div/>
.
Другие советы
С помощью CSS3 можно изменить размер background-image
с background-size
, выполняя обе цели одновременно.
Есть такие куча примеров на css3.info.
Реализовано на основе вашего примера, используя donald_duck_4.jpg.В данном случае, background-size: cover;
это как раз то, что вы хотите - это соответствует background-image
чтобы покрыть всю площадь содержащего <div>
и обрезает излишки (в зависимости от соотношения).
.with-bg-size {
background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
width: 200px;
height: 100px;
background-position: center;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
}
<div class="with-bg-size">Donald Duck!</div>
Вы пытались этим воспользоваться?
.centered-and-cropped { object-fit: cover }
Мне нужно было изменить размер изображения, центрировать (как по вертикали, так и по горизонтали), а затем обрезать его.
Я был рад обнаружить, что это можно сделать в одной css-строке.Проверьте пример здесь: http://codepen.io/chrisnager/pen/azWWgr/?editors=110
Вот этот CSS
и HTML
код из этого примера:
.centered-and-cropped { object-fit: cover }
<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200"
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
.imgContainer {
overflow: hidden;
width: 200px;
height: 100px;
}
.imgContainer img {
width: 200px;
height: 120px;
}
<div class="imgContainer">
<img src="imageSrc" />
</div>
Содержащий div по существу обрезает изображение, скрывая переполнение.
img {
position: absolute;
clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />
Спасибо, санчотефат.
У меня есть улучшение к вашему ответу.Поскольку обрезка очень подходит для каждого изображения, эти определения должны быть в HTML, а не в CSS.
<div style="overflow:hidden;">
<img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
object-fit
может помочь вам, если вы играете с<img>
тег
Приведенный ниже код обрезает ваше изображение за вас.Вы можете поиграть с объект-подгонка
img {
object-fit: cover;
width: 300px;
height: 337px;
}
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
В классе обрезки укажите размер изображения, который вы хотите отобразить:
.crop {
width: 282px;
height: 282px;
overflow: hidden;
}
.crop span.img {
background-position: center;
background-size: cover;
height: 282px;
display: block;
}
HTML-код будет выглядеть следующим образом:
<div class="crop">
<span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>
<p class="crop"><a href="http://templatica.com" title="Css Templates">
<img src="img.jpg" alt="css template" /></a></p>
.crop {
float: left;
margin: .5em 10px .5em 0;
overflow: hidden; /* this is important */
position: relative; /* this is important too */
border: 1px solid #ccc;
width: 150px;
height: 90px;
}
.crop img {
position: absolute;
top: -20px;
left: -55px;
}
Живой Пример:https://jsfiddle.net/de4Lt57z/
HTML:
<div class="crop">
<img src="example.jpg" alt="..." />
</div>
CSS - файл:
.crop img{
width:400px;
height:300px;
position: absolute;
clip: rect(0px,200px, 150px, 0px);
}
Объяснение: Здесь размер изображения изменяется по значению ширины и высоты изображения.А обрезка выполняется с помощью свойства clip.
Для получения подробной информации о свойстве clip следуйте:http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
Вы можете поместить тег img в тег div и сделать и то, и другое, но я бы не рекомендовал масштабировать изображения в браузере.Большую часть времени он выполняет паршивую работу, потому что браузеры имеют очень упрощенные алгоритмы масштабирования.Лучше сначала выполнить масштабирование в Photoshop или ImageMagick, а затем красиво подать его клиенту.
Что я сделал, так это создал серверный скрипт, который изменит размер и обрезает изображение на стороне сервера, чтобы оно отправляло меньше данных по сети.
Это довольно тривиально, но если кому-то интересно, я могу откопать и опубликовать код (asp.net)
Есть такие Услуги например, Filestack, который сделает это за вас.
Они берут URL вашего изображения и позволяют вам изменять его размер, используя параметры URL.Это довольно просто.
Ваше изображение будет выглядеть примерно так после изменения размера до 200x100, но с сохранением соотношения сторон
Весь URL-адрес выглядит следующим образом
https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg
но важная часть - это просто
resize=width:200/crop=d:[0,25,200,100]
<div class="crop">
<img src="image.jpg"/>
</div>
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 100%;
/*Here you can use margins for accurate positioning of cropped image*/
}
Если вы используете Bootstrap, попробуйте использовать { background-size: cover;
}
для <div>
может быть, дать div класс, скажем <div class="example" style=url('../your_image.jpeg');>
таким образом, это становится
div.example{
background-size: cover}
Мне нужно было сделать это недавно.Я хотел сделать миниатюру-ссылку на график NOAA.Поскольку их график мог измениться в любой момент, я хотел, чтобы мой эскиз изменился вместе с ним.Но есть проблема с их графиком:вверху у него огромная белая рамка, поэтому, если вы просто масштабируете его, чтобы сделать миниатюру, в документе останутся лишние пробелы.
Вот как я решил эту проблему:
http://sealevel.info/example_css_scale_and_crop.html
Сначала мне нужно было немного арифметически разобраться.Исходное изображение от NOAA имеет размер 960 × 720 пикселей, но верхние семьдесят пикселей - это лишняя область белой границы.Мне нужен был эскиз размером 348 × 172, без дополнительной границы вверху.Это означает, что желаемая часть исходного изображения имеет высоту 720-70 = 650 пикселей.Мне нужно было уменьшить это значение до 172 пикселей, т. е. 172/650 = 26,5%.Это означало, что 26,5% из 70 = 19 строк пикселей необходимо было удалить из верхней части масштабированного изображения.
Итак…
Установите высоту = 172 + 19 = 191 пикселям .:
рост =191
Установите нижнее поле равным -19 пикселям (сократив высоту изображения до 172 пикселов).:
поле-внизу:-19 пикселей
Установите верхнее положение на -19 пикселей (смещая изображение вверх, чтобы верхние 19 строк пикселей переполнялись и были скрыты вместо нижних).:
верхний:-19 пикселей
Результирующий HTML-код выглядит следующим образом:
<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>
Как вы можете видеть, я выбрал стиль содержащего <a> тега, но вместо этого вы могли бы создать стиль a <div>.
Одним из недостатков такого подхода является то, что если вы покажете границы, то верхняя граница будет отсутствовать.Поскольку я все равно использую border = 0, для меня это не было проблемой.