html CSS显示调整大小并裁剪的图像

 

问题描述:

我想显示具有特定宽度和高度的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;">&nbsp;</div>

给我:

<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

我该怎么办?
调整图像大小,然后将其切成我想要的大小?


有人可以确认其 不 能够改变,当你点击一个选择框,显示一个下拉的高度。select的size属性使其看起来像一个列表,CSS中的height属性也没有太大用。