僅當它不適合div時才顯示圖像的最大寬度

我使用Materialise框架，我對Cards組件（小版本）感興趣。僅當它不適合div時才顯示圖像的最大寬度

的代碼是這樣：（該small類限制了卡的高度300px）

<div class="card small"> 
    <div class="card-image"> 
     <img src="images/sample-1.jpg"> 
     <span class="card-title">Card Title</span> 
    </div> 
    <div class="card-content"> 
     <p>I am a very simple card. I am good at containing small bits of information. 
     I am convenient because I require little markup to use effectively.</p> 
    </div> 
    <div class="card-action"> 
     <a href="#">This is a link</a> 
    </div> 
</div>

這是我想達到的目標：

的圖像必須在中心其父
如果圖像的寬度小於卡的寬度，那麼它應該在卡中使用它的全寬
如果它比卡寬度，那麼它應該被裁剪以適合卡
應該響應大（使用responsive-img類）

來源

2016-03-16 VSG24

是否可以將圖像添加爲「background-image」而不是使用「img'標籤？ – Sanderfish

@Sanderfish不，它必須被用作'img' – VSG24

的圖像必須在它的父的中心

這可以通過應用margin: 0 auto;到.card-image並設置最大寬度比的.card的最大寬度更小來實現。

如果圖像的寬度的體積更小，該卡的寬度，那麼它應該與它使用的是全寬的卡

這是否意味着圖像不應該比原來的大尺寸？如果是的話，下面的演示應該符合標準。 .card-image設置爲最大寬度爲400px，.responsive-img的寬度爲350px。

如果它比卡寬度，那麼它應該被裁剪以適合卡

這可以通過設置overflow: hidden;到.card-image實現更大。

應該響應（使用響應-IMG類）

演示下面的圖片使用.responsive-img。要將圖像居中即使在裁切時，也可以將top，bottom，left，right的值設置爲-100%和margin至auto。務必將.card-image設置爲相對位置，並將.responsive-img設置爲絕對位置。

這裏有一個演示：

https://jsfiddle.net/suefeng/updr2ehp/1/

如果調整窗口，當窗口較窄的形象應該裁剪。圖像是350x300px。

來源

2016-03-16 15:29:02 Sue

非常接近我的想法，接受。 – VSG24

Linked a jsFiddle舉例。希望這可以幫助。

如果它比卡寬度，那麼它應該被裁剪以適合卡

當您指定的卡小，其高度將受到限制較大。要修改寬度，只需指定要使用的列數。

<div class="col s6">

如果圖像的寬度的體積更小，該卡的寬度，那麼它應該與它使用的是全寬的卡

太小會被扭曲某些圖像，請參閱jsFiddle中帶有jpg的第三個示例。

應該響應（使用響應-IMG類）

烤成物化爲響應特性應爲您提供了一些功能，例如在第二張牌。

<img src="any.jpg" alt="" class="circle responsive-img">

來源

2016-03-16 14:47:07 Danielson

整點是沒有扭曲的圖像！ – VSG24

僅當它不適合div時才顯示圖像的最大寬度

回答

相關問題