Question

图片应该有100％的宽度（其容器：容器是250px）
- 图片的固定高度应为150px
- 图像应保持比例（因此被裁剪）

.pic {
    width:100%;
    height:150px;
}

<div style="width:250px; background-color:red">
<img class="pic" src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg">
</div>

问题是：它没有保留比例。我希望裁剪图像以保持比例。

Answer 1

.pic { width: 250px; } 
div { overflow:hidden }

这将为您提供所需的裁剪效果。

Answer 2

要保持图像的大小，您应该只使用width属性。

max-width是避免过度平坦图像的好方法。

裁剪可以使用的图像clip，如： clip: rect(0px,60px,200px,0px);

reference

在下面找到仅使用height和width进行div裁剪的示例。

.pic {
    width:150px;
   
}
.center-cropped {
  width: 400px;
  height: 300px;
  background-position: center center;
  background-repeat: no-repeat;
}

#Resize
<div  style="width:250px; background-color:red">
<img class="pic" src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg">
</div>

#Cropped 

<div class="center-cropped"  style="background-image: url('http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg');"  >

Answer 3

如果你不介意使用前沿的东西，并且现在不需要IE / EDGE支持，你可以使用clip-path。将img的宽度调整为100%，然后剪切为所需形状的多边形。

此处我使用左上角（0 0），右上角（100% 0），右上角150像素（100% 150px）和左上角150像素（{{1 }}）：

0 150px

.pic {
  width:100%;
  clip-path: polygon(0 0, 100% 0, 100% 150px, 0 150px);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 150px, 0 150px);
}

请注意，当前版本的Chrome和Safari需要<div style="width:250px; height:170px; background-color:red"> <img class="pic" src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg"> </div>前缀。有关浏览器支持的更多详细信息，请访问：http://caniuse.com/#feat=css-clip-path

另请注意，我向-webkit-添加了height - 没有它，div将自身调整为调整大小的图像的高度，忽略裁剪。

Answer 4

这里是我的解决方案，您的图像和另外3个，很好地包装在Flexbox容器中。不同尺寸=＆gt;等于，小于和大于250x150。

阅读代码段中的评论。我认为代码符合您的所有要求。

如果没有，请告诉我。

/* generic globals */
html, body                  { box-sizing: border-box; height: 100%; width: 100%;
                              margin: 0; padding: 0; border: 0; cursor: default }
*, *:before, *:after        { box-sizing: inherit }

body { 
    display: flex; flex-wrap: wrap; /* flexbox container */
    justify-content: center;        /* center content */
    max-width: 82%; margin: 0 auto; /* center on screen */
    background: #fafafa
}

.pic-wrap { /* thumbnail container */
    width: 250px;                   /* as per requirement */
    min-width: 250px;               /* to be inherited by .pic */
    height: 250px;                  /* just for proof, remove when done */
    background: cornflowerblue;     /* ditto?? */
    margin: 4px
}
.pic { /* thumbnail */
    height: 150px;                  /* as per requirement */
    min-height: 150px;              /* for shorter than 150px pics */
    min-width: inherit;             /* for smaller than 250px pics */
    overflow: hidden                /* chop excess */
}
.fit { /* stretcher */
    min-width: inherit;             /* for smaller pics */
    max-width: 100%                 /* no wider than parent width (250px)*/
}
.byline { /* demo */
    width: 100%;
    padding: 5px;
    text-align: center
}

<div class="pic-wrap">
    <div class="pic">
        <img src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg">
    </div>
    <div class="byline">574x710 crop</div>
</div>
<div class="pic-wrap">
    <div class="pic">
        <img class="fit" src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg">
    </div>
    <div class="byline">574x710 crop-fit</div>
</div>
<div class="pic-wrap">
    <div class="pic">
        <img src="https://unsplash.it/250/200?image=859" />
    </div>
    <div class="byline">250x200 crop</div>
</div>
<div class="pic-wrap">
    <div class="pic">
        <img class="fit" src="https://unsplash.it/250/150?image=859" />
    </div>
    <div class="byline">250x150 match</div>
</div>
<div class="pic-wrap">
    <div class="pic">
        <img src="https://unsplash.it/150?image=225" />
    </div>
    <div class="byline">150x150 original</div>
</div>
<div class="pic-wrap">
    <div class="pic">
        <img class="fit" src="https://unsplash.it/150?image=225" />
    </div>
    <div class="byline">150x150 scale-fit</div>
</div>
<div class="pic-wrap">
    <div class="pic">
        <img src="https://unsplash.it/100?image=076" />
    </div>
    <div class="byline">100x100 original</div>
</div>
<div class="pic-wrap">
    <div class="pic">
        <img class="fit" src="https://unsplash.it/100?image=076" />
    </div>
    <div class="byline">100x100 scale-fit</div>
</div>

如何在css中调整图像大小以保持比例（并被裁剪）？

4 个答案: