DIV與最大寬度和最大高度和保留比例（僅CSS）

好吧，這是一個具有挑戰性的！我真的想看看這是否可以用CSS完成如果可能的話。DIV與最大寬度和最大高度和保留比例（僅CSS）

我有一個獨特的佈局，要求圖像的大小和位置根據他們的父容器。如果圖片超過它的高度或寬度的父母，我需要它縮小大小以適應。目前，我一起使用最大寬度和最大高度，並且工作正常。圖像調整大小以適應並保持高寬比。

現在，這裏是棘手的部分。我需要爲這個圖像添加一個特殊的陰影，而這個陰影不能用CSS陰影框來實現。陰影使用PNG圖像。陰影需要根據圖像調整大小和放置位置 - 這意味着它落在圖像的底部，它等於圖像的寬度。

通常我會做到的陰影與::後的大小和位置使其相對於它的父元素，它完美的作品除了它的父是圖像和圖像不允許::之前或之後:: 。

所以，據我所知，實現這一目標的唯一方法是將圖像包裝在另一個容器中，以便我可以使用該容器作爲父級元素和陰影圖層的定位參考。但是我無法找到一種方法來使容器div的行爲與圖像的最大寬度和最大高度的大小相同，同時仍然保持縱橫比。

保持高寬比的最佳方法是使用填充頂部，當寬度是唯一重要因素時，它的出色表現非常出色。但是，填充頂部技術不允許容器具有最大高度。

所以我正在尋找一種CSS技術，可以讓塊元素保持其縱橫比，同時具有最大寬度和最大高度。類似於圖像在這種情況下的表現。

我搜索了一個解決方案的互聯網，並沒有看到任何人描述這種確切的情況。非常感謝任何能夠提供幫助的人。

新增2017年9月1日：

我應該指出，這不僅僅是影子，我需要相對於圖像定位更多。還有一些其他元素需要以這種方式定位，而其他元素不是簡單的背景圖像。因此，儘管Lightbender的解決方案對於影子來說非常棒，但它並不能解決眼前的大問題。我需要一個容器周圍的圖像，我可以用它作爲參考來定位其他子元素。

來源

2017-08-29 Benek Lisefski

雖然之前和之後都不會工作（很容易），但仍然可以使用填充和背景圖像，並且它將以您當前的設置工作方式完全工作。

img.fancyshadow { 
    height: auto; 
    width: auto; 
    max-width: 100%; 
    max-height: 100%; 
    padding: 0 10px 10px 0; /* adjust as needed */ 
    background: url('path/to/your/shadow'); 
    box-sizing: border-box; 
}

我沒有在Mac得心應手，所以我只在Firefox，Chrome和IE測試這一點，任何人都可以確認Safari瀏覽器呢？

來源

2017-08-30 19:35:30 LightBender

簡單的解決方案。我會盡快嘗試，並確認它是否適用於我的情況。 –

這看起來像是一個很好的陰影解決方案。儘管我現在意識到我不僅需要這個解決方案，還需要這個解決方案。在一些頁面上，還有其他元素需要相對於圖像進行定位（例如，絕對定位好像圖像是相對父元素）。所以爲了讓這些工作，我確實需要一個解決方案，在該圖像周圍包裝一個容器，以便我可以使用容器來定位這些其他元素。所以我讚賞這個解決方案對於影子的簡單性，但不幸的是它並沒有解決整個問題。 –

我不認爲你可以用你想像的方式在純css中做到這一點，因爲max-height不會影響包含圖像的高度。相反，圖像會尊重寬度和溢出。我從來沒有嘗試過，但它可能會爲您提供一種可行的方法。 https://stackoverflow.com/a/10804311/8533154對不起，我的解決方案並沒有解決你的整個問題，最好的運氣:) – LightBender

所以我想看一個簡單的例子，你試圖作爲一個起點，但你提到的圖像需要根據其容器的大小進行大小/定位。

下面是一個類似的例子。不知道它是否可以修改以適應您的問題。讓我知道，我可以調整。

當需要有響應圖像時，我從不使用IMG標籤。在CSS中設置背景圖像可以更好地控制響應式網站/應用程序。上背景尺寸

文檔：

蓋縮放的背景圖像，使背景區域由背景圖像完全覆蓋要儘可能大。背景圖像的某些部分可能不是考慮到背景定位區域之內

包含縮放圖像以最大尺寸，使得它的兩個寬度和它的高度可以容納內容區域

內部這是我沒有想到的又

$(function() { 
 
    $('.banner').resizable(); 
 
});

.banner { 
 
    background-image: url('https://s-media-cache-ak0.pinimg.com/originals/15/ae/a6/15aea601612443d5bddd0df945af6ffd.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 175px; 
 
    width: 100%; 
 
} 
 

 
p { 
 
    color: #666; 
 
} 
 

 
.ui-resizable-se { 
 
    box-shadow: -1px -3px 10px 3px white; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
 

 
<h1>Resize the image using the black triangle at bottom right of image</h1> 
 
<p>Note how the image fills the container and the position is always centered (you can control where the position is, doesn't have to be in the center)</p> 
 

 
<div class="banner"> 
 
</div>

來源

2017-08-30 19:49:16 flyer

感謝您的回覆，但我正在嘗試僅使用CSS解決方案。將僅使用Javascript作爲最後的手段。 –

哦，我只用這裏的javascript來演示容器越來越大。我試圖強調的是在CSS中使用background-image和background-position和background-size。通過這種方式，你可以用IMG標籤獲得更多的圖像控制權。 – flyer

我已經更新了演示文稿以調整大小手柄 - 這只是爲了演示圖像的響應特性，當您通過CSS設置它們時。 – flyer

DIV與最大寬度和最大高度和保留比例（僅CSS）

回答

相關問題