CSS显示已调整大小和缩放的图像 [英] CSS Display an Image Resized and Cropped

问题描述

我想显示来自具有一定宽度和高度的网址的图片，即使它有不同的大小比例。
所以我想调整大小（保持比例），然后将图像切成我想要的大小。

我可以用html img 属性调整大小，我可以使用 background-image 。


我该如何做？

I want to show an image from an URL with a certain width and height even if it has a different size ratio. 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.
How can I do both?

例如：

图片：

尺寸 800x600 像素，我想显示为 200x100 像素

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

使用 img 调整图片大小 200x150px ：

<img 
    style="width: 200px; height: 150px;" 
    src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

这给我这个：

That gives me this:

<img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

code> background-image 我可以剪切图像 200x100 像素。

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

<div 
    style="background-image:
           url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

给我：

Gives me:

<div style="background-image:url('http://img1.jurko.net/wall/paper/donald_duck_4.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?

推荐答案

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

You could use a combination of both methods eg.

<div class="crop">
    <img src="..." alt="..." />
</div>

CSS：

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

您可以使用负值保证金在< div /> 中移动图片。

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

这篇关于CSS显示已调整大小和缩放的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！