html圖像不適合圖像包裝

我需要調整圖像並將其裁剪到它的包裝中。html圖像不適合圖像包裝

 <div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3"> 
      <div class="inner-box fullbox"> 
       <a href='#module'> 
       <div class="image-wrap" > 
       <img src="../img/placeholder.png" /> 
       </div> 
       </a> 
      </div> 
     </div>

CSS

.box { 
    width: 282px; 
    min-height: 282px; 
    padding: 10px; 
    float: left; 
} 

.inner-box { 
    width: 100%; 
    min-height: 282px; 
    top: 10px; 
    right: 10px; 
    bottom: 10px; 
    left: 10px; 
    padding: 20px; 
} 

.fullbox { 
    padding: 0px; 
} 

.image-wrap { 
    ... 
}

我試圖把影像爲背景，像你見下文，但並沒有爲我工作。我想從圖像中找到適合box的圖像部分。

.image-warpper { 
    background-image: url(...); 
    background-repeat: no-repeat; 
    background-size: contain; 
}

是否必須通過php裁剪圖像還是可以在css中縮放或裁剪它？

感謝

來源

2014-01-21 Marc Radziwill

「我還有通過PHP裁剪圖像...」

根據圖像文件的大小及其強烈推薦使用PHP用於此目的。記住，客戶瀏覽器將始終加載完整的圖像，以調整它的CSS給定的值。

所以，即使你有一個風格告訴形象永遠不會超過100x100px客戶端的瀏覽器將加載完整大小的圖片。

如果一個巨人的形象（指文件大小），這可能需要「很長」。

有相當不錯的類/庫，你可以用PHP用它來獲得一個舒適，輕鬆地與播放的圖像。那麼你的網頁將會更快。

比如我最近發現：

http://wideimage.sourceforge.net/

超級甜蜜的事。支持鏈接和東西。

來源

2014-01-21 13:01:09 serjoscha

感謝真棒圖書館;）工作美麗！翹起拇指，並按照我需要的尺寸創造它們;） –

你應該能夠做到這一點：

.image-wrap img { max-width:100%; height:auto; }

這將制約和縮小圖像，然後將其設置爲100%寬，但是，根據廣泛的父元素是。

來源

2014-01-21 12:47:56

銘記，你會使用img HTML標籤，使圖像包裹div在position:relative和overflow:hidden並將圖像與position:absolute和height:100%，width:auto（或width:100%和height:auto）。這樣，圖像將在父容器中裁剪並保持其比例。

See this demo並調整幀的大小以查看圖像在各個維度中如何裁剪和調整大小。

來源

2014-01-21 12:53:22 otinanai

對我來說，只是工作的寬度：100％和身高：自動！然後我仍然有一些空間留在圖像下面！不過謝謝！ –

html圖像不適合圖像包裝

回答

相關問題