Я хочу показать изображение с 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="/img/5a3f6fd7a849b644649991b3943216d5.jpg">
А с background-image
я могу вырезать изображение 200x100
пикселей.
<div
style="background-image:
url('/img/5a3f6fd7a849b644649991b3943216d5.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Дает мне:
<div style="background-image:url('/img/5a3f6fd7a849b644649991b3943216d5.jpg'); width:200px; height:100px; background-position:center;"> </div>
Как я могу сделать оба?
Изменить размер изображения, а затем сократить его размер, который я хочу?