如何在div內保持圖像而不伸展或壓縮？

我有這個網站：如何在div內保持圖像而不伸展或壓縮？

<div class="postcard-container"> 
    <div id="postcard-classic" class="postcard-classic"> 
     <div class="postcard-classic-img"> 
      <img ng-src="{{postcard.image.cropped}}" /> 
     </div> 
    </div> 
</div>

而這個CSS：

.postcard-container { 
    position: absolute; 
    display: table; 
    width: 100%; 
    height: 100%; 
    padding: 20px; 
} 

.postcard-classic { 
    display: table-cell; 
    vertical-align: middle; 
    background-position: center center; 
    background-image: url("../img/frames/postcard_00.png"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    padding: 10px; 
} 

.postcard-classic-img { 
    max-height: 100%; 
    max-width: 100%; 
    width: 100%; 
}

我想我的形象在左上角開始。如果它是一個非常小的圖片，應該爬到左上角，如果它太大，我想溢出不顯示。讓我們舉一個例子，如果圖像太大。我的目標是：

其中藍色是圖像和紅色股利。

我怎樣才能解決這個問題：什麼我從我上面的代碼張貼是，如果圖片太大以下？

編輯

，這是我現在在多大程度上是：jsfiddle。正如你所看到的，圖像不是從左上角開始的，溢出沒有隱藏。

來源

2015-08-25 Mulgard

你能提供一個小提琴嗎？ – RWAM

這正是你想要做的：https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/ –

用小提琴更新 – Mulgard

您希望的行爲應該是div中背景圖像的默認行爲。所以你應該只需要backround-image和background-repeat屬性。

.postcard-classic { 
    background-image: url("../img/frames/postcard_00.png"); 
    background-repeat: no-repeat; 
}

來源

2015-08-25 15:47:58 dinomix

這就是我已經有'.postcard-classic' – Mulgard

是的，我所說的是從其中刪除一切。 – dinomix

不能這樣做。它需要其他造型的東西。我用小提琴的例子發佈了一個工作解決方案。 – Mulgard

你幾乎不應該指定任何值寬度

.postcard-classic-img { 
    max-height: 100%; 
    max-width: 100%; 
}

來源

2015-08-25 16:01:11

忽略寬度導致相同的結果。 – Mulgard

我想我可以接受的解決方案住：

fiddle

.postcard-container { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    display: table; 
    padding: 20px; 
} 

.postcard-classic { 
    display: table-cell; 
    vertical-align: middle; 
    background-color: yellow; 
    overflow: hidden; 
} 

.postcard-classic-img { 
    display: block; 
    position: absolute; 
    margin: auto; 
    overflow: hidden; 
    top: 10%; 
    bottom: 10%; 
    left: 8%; 
    right: 8%; 
} 

.postcard-classic-img img { 
    position: absolute; 
    width: 100%; 
    height: auto; 
}

來源

2015-08-25 17:11:41 Mulgard

使用Flex解決方案

.postcard-classic-img{ 
    width:100%; 
    height:250px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    overflow:hidden 
} 
.postcard-classic-img img{ 
    flex-shrink:0; 
    -webkit-flex-shrink: 0; 
    max-width:100%; 
    max-height:100%; 
}

來源

2017-04-30 05:04:19 jaseelmp

如何在div內保持圖像而不伸展或壓縮？

回答

相關問題