如何根據容器的某些尺寸限制將圖像寬度設置為100％？

Question

圖像可以比其容器的寬度寬或小於容器的寬度。 要控制較大圖像的寬度，我可以使用max-width: 100% 。 同樣，我也可以為較小的圖像設置width:100% 。

僅當原始圖像至少是其容器寬度的50％時，才可以將圖像寬度設置為100％嗎？ 如果存在，我將首選基於CSS的解決方案，因為圖像會動態加載。

Answer 1

由於圖像會動態加載，因此我認為您最好的選擇是使用javascript。 您需要獲取圖像的寬度（ 確定跨瀏覽器的圖像原始大小？ ），然后可以將其與圖像的父圖像進行比較，並確定其大於還是小於50％。

更新：

考慮到該問題沒有提供任何示例代碼，我不想只是猜測。 但是，偽代碼如下所示：

// after ajax completes
var image = jQuery('.image'),
parent = image.parent();
if (image.width() * 2 >= parent.width()) {
   image.css('width','100%');
}

Answer 2

var containerDiv = $(".container");
var image = $(".img");
image.width(image.width()>containerDiv.width()?containerDiv.width():image.width());