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

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

我可以使用html img属性调整大小，并且可以用background-image剪切。
我怎样才能做到这一点？

例：

这个图片：

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

与img我可以调整图像200x150px ：

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

这给了我这个：

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

通过background-image我可以将图像剪切成200x100像素。

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

给我：

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

我怎样才能做到这一点？
调整图像大小，然后将其裁剪成我想要的大小？

---

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

<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;
}

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

---

随着CSS3有可能改变大小background-image与background-size ，实现这两个目标的一次。

在css3.info上有很多例子。

根据你的例子实施，使用donald_duck_4.jpg。 在这种情况下， background-size: cover; 正是你想要的 - 它适合background-image来覆盖包含<div>的整个区域并剪辑多余（取决于比率）。

.with-bg-size {
  background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

css3背景图像的背景大小

---

你尝试过使用这个吗？

.centered-and-cropped { object-fit: cover }

我需要调整图像大小，中心（垂直和水平）和裁剪。

我很高兴地发现，它可以在一个CSS文件中完成。 查看这里的例子：http://codepen.io/chrisnager/pen/azWWgr/?editors=110

---

以下是该示例中的CSS和HTML代码：

CSS：

.centered-and-cropped { object-fit: cover }

HTML：

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
  style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

链接地址: http://www.djcxy.com/p/38793.html

上一篇: CSS Display an Image Resized and Cropped

下一篇: height` positioned 2 pixels below where they should be?