Question

图像可以宽于容器的宽度或小于容器的宽度。要控制较大图像的宽度，我可以使用max-width: 100%。同样，我也可以为较小的图像设置width:100%。

只有当原始图像至少是其容器宽度的50％时，才有办法将图像宽度设置为100％吗？如果它存在，我会更喜欢基于CSS的解决方案，因为图像将动态加载。

Answer 1

由于图像会动态加载，我认为你最好的镜头是使用javascript。您需要获取图像的宽度（Determine original size of image cross browser?），然后您可以将其与图像的父级进行比较，并确定它是高于还是低于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());

如何根据容器的特定尺寸限制将图像宽度设置为100％？

2 个答案: