Question

我想检查图像宽度是否超过400像素，我希望该图像获得完整的div宽度。如果图像小于400像素，则以正常尺寸打印。

有什么想法怎么做？

<div id="volta">
<img src="/img/volta.jpg">
</div>

#volta{
 width:500px;
}

Answer 1

据我所知，这在CSS中不存在。相反，您应该使用use类。

定义一些CSS类，以应用所需的样式：

.long_width {
background: blue;
}

然后，您将使用Javascript检查图像的宽度。您不需要jQuery即可执行此操作，您可以使用普通Javascript来执行此操作（除非您已经导入了jQuery，并且需要其他功能来使用它）。也许是这样的：

let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');

然后您将使用Javascript相应地添加和删除样式：

if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}

您问题的具体答案取决于您的意图。但是为了保持代码简单，您应该使用Javascript处理逻辑，而不要依赖CSS选择器来处理这些复杂的事情。而是创建一个包含所需样式的CSS类，然后使用Javascript根据用户上传的图像的大小来应用它。

此外，如果用户上传图像，则应将其加载到内存中并在内存中检查其属性，而不要依赖于DOM元素。像这样：

let img = new Image();
img.src = "{data URL of img}"

Answer 2

您将需要javascript / jQuery才能正常工作。像这样：

$('img').each(function(){
  if($(this).width() > 400){
    $(this).css('width', '100%');
  }
});

这里也是working jquery example。

Answer 3

将id应用于图像，并使用jquery检查其宽度如果大于400像素，请修改其宽度或添加一个相同的类。

示例

$(document).ready(function(){
  
  if($("#image").width() > 400){
     $("#image").css("width", "100%");
  }
  else{
    $("#image").css("width", "10px");
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>

Answer 4

您可以像FlokiTheFisherman（带有％）那样进行操作，也可以使用“ wv”代替“％”。我建议使用大众汽车。

Answer 5

img[width='400'] {
    width: 100%;
}

如果图像宽度> 400 =图像宽度= 100％css

5 个答案: