CSS調整圖像以適合於容器

我想，以適應圖像的容器具有不同的圖像大小是這樣的：CSS調整圖像以適合於容器

例子：

1.在更大尺寸的容器全尺寸。

2.中間與水平尺寸的容器。

3.與垂直尺寸的容器中。

退房從這個link

來源

2016-01-21 Butter Toast

請在jsfiddle或snippet中提供您的代碼。 –

不確定是否垃圾郵件或實際上是一個編程問題，因爲沒有提供代碼... –

你有一個點人@GusstavvGil，但是我發佈了答案 –

由於高塔姆說，你需要使用

max-height:100%; 
max-width: 100%;

所以，你可以定義一個類的容器

.container 
{ 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    border:1px solid black; 
    background-color: #ffffff; 
    width: 50px; 
    height: 50px; 
}

而且一類圖像

.maxsize 
{ 
    max-height:100%; 
    max-width: 100%; 
}

的display:flex;屬性使容器更易於配置，因此您可以更快地對內容進行居中。您可以刪除border屬性，只是爲了更容易查看容器邊緣。希望它有幫助。

Updated jsfiddle

來源

2016-01-21 08:29:14

第一幅圖像可以放大？ –

使用'：first-child' @ButterToast –

不知道你是什麼意思。你可以將容器製作成任意大小（我已經放了50px以便於查看）。圖像將相應地適合（保持縱橫比）。如果大小是一個正方形，並且圖像是正方形，那麼它將完全適合。如果圖像是矩形，那麼它將適合最大的軸。 –

一個例子只需設置父容器上這個屬性。

background-size : contain; 
background-repeat: no-repeat;

這告訴瀏覽器確保圖像不超過父容器的大小。

來源

2016-01-21 07:35:50 Robert

我試過你的代碼，你能幫我修好嗎？ [jsfiddle]（https://jsfiddle.net/w7y26ft5/1/） –

當然，你需要記住一些小事情。其一，爲了使圖像能夠基於父容器進行自動縮放，父容器需要具有明確的寬度和高度。我更新小提琴運行，你可以調整父容器的尺寸爲任何你喜歡的。 https://jsfiddle.net/svp9Lp63/1/ – Robert

這是很容易做到

只圖像對準中心和

使用 max-height:100% 和 max-width:100%

來源

2016-01-21 07:36:17

正如羅伯特提到：

background-size : contain; 
background-repeat: no-repeat;

不過可以肯定的添加：

background-position: center;

然後它將保持在容器的邊界內並被居中。

來源

2016-01-21 07:41:03 Awin

這假定你使用的是背景圖片而不是img標籤，那麼這將是一個不同的故事。 – Awin

如果這有幫助，請註冊或標記爲正確答案。這將有助於我的計算器聲譽。祝你好運！ – Awin

CSS調整圖像以適合於容器

回答

相關問題