Я хочу показать изображение из URL с определенной шириной и высотой, даже если оно имеет другое соотношение размеров. Поэтому я хочу изменить размер (сохранить соотношение), а затем обрезать изображение до нужного размера.
Я могу изменить размер с помощью img
свойства HTML, и я могу сократить с 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>
Как я могу сделать оба?
Изменить размер изображения, а затем сократить его размер, который я хочу?