我已經環顧了很多這個解決方案，但我似乎無法找到一個。CSS裁剪圖像到一定的尺寸

我有一張圖片，需要在一組維度中顯示。它不得超過容器寬度的100％：沒問題。但是當我嘗試將它裁剪到容器的50％時，它被縮放。

100％的寬度的一個例子：當它被設置爲只有50％的容器的http://i.stack.imgur.com/WTisJ.png

而問題的一個示例：http://i.stack.imgur.com/J01sF.png

的代碼：

CSS：

.shopcontent{ 
    margin-top: 120px; 
} 

.product{ 
    margin: 2px; 
    display: block; 
    height: 250px; 
    width: 300px; 
    border: 2px solid #7f8c8d; 
    border-radius: 10px; 
    overflow: hidden; 
} 

.prodimg{ 
    max-width: 100%; 
    max-height: 50%; (The problem line!) 
    border: 0px solid white; 
    border-radius: 10px; 
} 

.prodimgcont{ 
    overflow: hidden; 
}

HTML：

<div class="shopcontent"> 

<div class="product"> 

    <span class="prodimgcont"> 
    <img src="http://u.danmiz.net/xqz" class="prodimg"></img> 
    </span> 

    <p>This is a test</p> 

</div> 

</div>

感謝您的幫助：我真的試圖找到一種方法來做到這一點，但似乎沒有任何工作！

來源

2014-12-28 crablab

首先，你的img標籤應該是自動關閉的。所以用

<img src="http://u.danmiz.net/xqz" class="prodimg" />

您的問題，更換

<img src="http://u.danmiz.net/xqz" class="prodimg"></img>

。我建議你給容器提供尺寸（順便改一下span到div），然後將圖像指定爲background-image，因爲它對縮放圖像更有用，特別是對於background-size: cover。

HTML

<div class="shopcontent"> 
    <div class="product"> 
     <div class="prodimgcont"></div> 
     <p>This is a test</p> 
    </div> 
</div>

CSS

.shopcontent{ 
    margin-top: 120px; 
} 

.product{ 
    margin: 2px; 
    display: block; 
    height: 250px; 
    width: 300px; 
    border: 2px solid #7f8c8d; 
    border-radius: 10px; 
    overflow: hidden; 
} 

.prodimgcont{ 
    display: block; 
    max-width: 100%; 
    height: 50%; 
    max-height: 50%; 
    border: 0px solid white; 
    border-radius: 10px; 
    background-image: url(http://u.danmiz.net/xqz); 
    background-size: cover; 
    overflow: hidden; 
}

我創建了一個JSfiddle向您展示如何做到這一點。

這是一種方法。讓我知道你是否絕對需要使用img標籤。這也有一個解決方案。無論如何：您需要將圖像容器的尺寸分配給圖像容器，而不是圖像本身 - 因爲圖像需要切斷。

請注意，除非您使用a polyfill，否則background-size: cover將無法在IE8及更低版本中使用。

來源

2014-12-28 17:50:21 ProblemsOfSumit

謝謝！這很好:)我需要能夠改變HTML中的圖像（最終src將由PHP提供...），所以我只是添加了一個樣式標籤。當然是 – crablab

啊。別客氣。請注意我對IE8的評論，我剛剛添加到答案中。 – ProblemsOfSumit

其實，使用標籤會更容易...對不起：/ – crablab

如果我正確理解你的問題，你可以達到理想的裁剪效果，像這樣：

HTML

<div class="img_container"> 

    <div class="cropper"> 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQWvNeCn17lshW3c9Z4PLXlTZe6GPf2oiNrLZQft1nPgld1WYb" /> 
    </div> 
</div>

CSS

.img_container { 
    width:300px; 
    height:250px;  
} 

.img_container .cropper { 
    width:50%; 
    height:50%; 
    overflow:hidden; 
} 

.img_container .cropper img { 
    width:200%; 
    height:200%; 

}

您使用.cropper div來設置所需的50 ％寬度並添加overflow:hidden，然後將子女img標記設置爲width:200%（祖父母寬度的100％）

小提琴：http://jsfiddle.net/6hjL0pat/3/

編輯：

更新撥弄你的使用情況

來源

2014-12-28 17:53:47

CSS裁剪圖像到一定的尺寸

CSS：

HTML：

回答

相關問題