CSS添加/移除填充到根據圖像的元件寬度

Question

我有一個包含的最大寬度100％水平居中圖像％-width的元件。

.container { width: 80%;) 
.container img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

我想填充頂部添加到容器或餘量頂部的圖像上僅當容器是原單圖像寬度的寬度大於100％。 例如當瀏覽器窗口非常大或圖像很小時，以便圖像不會完全填充容器寬度。

有沒有辦法實現這個目標？

編輯：元素有一個類，而不是一個ID。我的問題是指tumblr佈局和重複的每一個崗位的元素，所以我不能讓他們在模板的ID ...

Answer 1

如果你的容器的寬度是基於百分比和圖像的最大寬度設爲100％，圖像將始終擴大以填充容器，而不管其大小。這意味着容器永遠不會比圖像大。假設這不是你的意思，圖像是一個特定的寬度，我已經在下面提供了兩種可能的解決方案。

---

聽起來好像你想在整個屏幕寬度減少時應用邊距（對於手機，也許）。在這種情況下，最簡單的方法是在CSS中使用媒體查詢。

開始通過定義您想爲您的網站的擴展版本一樣，你已經（臺式機或平板電腦大，無論你的目標而定）的樣式。

#container { width: 80%;) 
#container img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

然後定義你的媒體查詢在任何斷點有意義爲您設計的CSS文件更遠了。

@media (max-width: 320px){ 
    #container img { 
     margin-top: 5px; 
    } 
} 

每當屏幕寬度減少到320像素或更小，這個媒體查詢塊內的所有CSS規則將激活，讓你動態修改。

---

如果你沒有一個響應式設計是這樣，屏幕尺寸將不會被改變，那麼您可能需要使用一些JavaScript來處理造型的變化。

首先，在你的CSS，增加了邊緣的一類。

.img-margin { 
    margin-top: 5px; 
} 

一個腳本標籤中使用查詢選擇搶你需要控制，並創建將處理檢查相互比較各自的尺寸和有條件地添加/刪除保證金類的功能元素的保持。

<script>  
    var container = document.getElementById('container'); 
    var image = document.getElementById('image'); 

    container.addEventListener('click', toggleMargin); 

    function toggleMargin(){ 
     if (container.offsetWidth > image.offsetWidth){ 
      image.classList.add('img-margin'); 
     } else { 
      image.classList.remove('img-margin'); 
     } 
    } 
</script> 

我在上面的例子中使用了事件監聽器來點擊。您將需要用發生的任何事件來替換，以觸發更改。

---

我提倡媒體查詢路線，因爲它更優雅，不需要JavaScript，雖然JS方法可以允許根據您的使用情況更多的靈活性。