css 如何做到固定图片比例 短边剪切

Question

我想写死图片的宽和高，比如都是200px，但同时我又不想图片变形。有什么办法可以实现按照图片的短边进行剪切呢？比如，有一张图片是400600的，我希望他能剪切成400400的，多出去的部分就不要了，然后按照比例缩放成200*200的，放进我的容器中。
css能实现么？

Answer 1

谢谢大家集思广益，最后我综合了大家的想法，终于找到了最佳解决方案。写出来大家看一下哈~

<div style="width: 200px; height: 200px; background:url(./img/text.png) no-repeat;background-size: cover;background-position:center;overflow:hidden; ">
</div>

Answer 2

<div style="width: 200px; height: 200px; font-size: 150px;">
  <img src="./test.png" alt="" style="max-width: 200px;max-height: 200px;">
</div>

Answer 3

css好像不能对img直接做自适应裁剪处理，可以用background代替或者js模拟

Answer 4

css只能做到障眼法式的隐藏。
你的需求，感觉是想重新生成一张按短边居中裁剪过的正方形图片，七牛的图片处理倒是可以帮到你吧

Answer 5

试试使用css的clip属性

Answer 6

外层一个固定宽高的div，里面放图片，图片固定宽度，高度自适应，外层的div超出部分隐藏。。如果想让放进去的图片显示居中的部分用背景图，background-position:center;
我不知道是不是你想要的效果

Answer 7

@lafang @溺水的鱼

<div style="width: 200px; height: 200px; font-size: 150px;background-position:center;overflow:hidden; ">
  <img src="./test.png" alt="" style="max-width: 200px;">
</div>

第二种，引用了@smallmarkone 答案

<img border="0" src="./test.png" style="position:absolute;clip:rect(10px 110px 200px 10px)">

Answer 8

img外边套一个容器div，设置宽高，img在div中水平垂直居中，然后div设置overflow:hidden;但是这种情况只能适用于图片尺寸大于div容器的宽高的情况

Answer 9

来看看这个。

<img style="width: 200px;height:200px;display:inline-block;background:url(./img/text.png) no-repeat 0 0 / cover;">