CSS是我們前端開發(fā)中非常重要的一種技術(shù)，它可以實現(xiàn)很多我們所需的效果，比如本文要介紹的圖片短邊截取。

所謂圖片短邊截取，就是將圖片的短邊裁剪掉一部分，以適應(yīng)其所在元素的寬或高，并保持其寬高比。這個效果通常用在響應(yīng)式設(shè)計中，當(dāng)我們在不同尺寸的設(shè)備上展示同一圖片時，為了讓圖片適應(yīng)頁面而不失真，就需要用到它。

代碼：
.img-wrap {
overflow: hidden;
}
.img-wrap img {
width: 100%;
height: auto;
}

上面的代碼使用了overflow:hidden來隱藏元素的超出部分，使得圖片可以被裁剪掉。然后，我們給圖片設(shè)置了100%的寬度和自動高度，這樣圖片就會按比例縮放，直到適應(yīng)其所在元素。

下面來看一個例子，我們將一個寬高比為2:1的圖片，放到一個寬度為400px的容器中。如果我們不切割圖片，那么它只會占據(jù)容器的一半，留下了很多空白區(qū)域，影響了美觀。但如果我們使用圖片短邊截取，那么圖片就會被裁剪到高度為200px，恰好填滿整個容器，非常完美。

代碼：
<div class="img-wrap">
<img src="example.jpg" alt="example">
</div>

最后，還有一個注意事項，就是在使用圖片短邊截取時，要保證圖片的寬高比與所在容器的寬高比相同，否則可能會造成圖片變形，達(dá)不到我們的效果。

綜上所述，圖片短邊截取是響應(yīng)式設(shè)計中常用的一個技巧，通過設(shè)置CSS樣式，可以使圖片適應(yīng)不同尺寸的設(shè)備，不失真且美觀。