html - CSS显示调整大小并裁剪的图像(CSS Display an Image Resized and Cropped)

Question

I want to show an image from an URL with a certain width and height even if it has a different size ratio.

(我想显示具有特定宽度和高度的URL的图像，即使它具有不同的尺寸比例。)

So I want to resize (maintaining the ratio) and then cut the image to the size I want.

(所以我想调整大小（保持比例），然后将图像切成我想要的大小。)

I can resize with html img property and I can cut with background-image .

(我可以使用html img属性调整大小，也可以使用background-image进行裁剪。)
How can I do both?

(我该怎么办？)

Example:

(例：)

This image:

(这个图片：)

Has the size 800x600 pixels and I want to show like an image of 200x100 pixels

(尺寸为800x600像素，我想显示为200x100像素的图像)

With img I can resize the image 200x150px :

(使用img我可以将图像尺寸调整为200x150px ：)

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

That gives me this:

(这给了我这个：)

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

And with background-image I can cut the image 200x100 pixels.

(使用background-image我可以将图像切成200x100像素。)

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

Gives me:

(给我：)

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

How can I do both?

(我该怎么办？)
Resize the image and then cut it the size I want?

(调整图像大小，然后将其切成我想要的大小？)

  ask by InfoStatus translate from so

Answer 1

You could use a combination of both methods eg.

(您可以使用两种方法的组合，例如。)

  .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> 

You can use negative margin to move the image around within the <div/> .

(您可以使用负margin在<div/>内移动图像。)