Question

我的图像宽度为50像素，容器为500像素。使用下面的代码将图像拉伸100％宽度，即使我设置max-width: 100%，图像尺寸也将为500像素。

如何将图像设置为50px，但如果图像大小超过500px，它将被拉伸到500px，因为它是100％？注意：我无法将sizes属性设置为50px，因为首先我不知道实际宽度，其次如果超过500px，则图像必须为500px。

为什么我问这个问题？我有一个博客，并使用php + javascript将图片上传到网站。 Php脚本将图像大小调整为50px，200px，500px。但是，如果我上传的图片小于500像素（例如，300像素），srcset将仅包含image_50.jpg 50w, image_200.jpg 200w。

<div style="width: 500px;">
  <img src="image_50.jpg" sizes="100vw" srcset="image_50.jpg 50w" style="max-width:100%;">
</div>

https://jsfiddle.net/baL5cj0k/4/

P.S。我想知道为什么这么小的图像常见情况会如此复杂

Answer 1

你可以在图片标签里面使用srcset来实现这个。

<picture>
  <source media="(min-width: 500px)" srcset="image_500.jpg">
  <source media="(max-width: 500px)" srcset="image_50.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

希望这会有所帮助

Answer 2

这是因为你在srcset中给出50w。如果你增加那个数量的值，那么你的图像就可以了。不确定背后是什么。

＆＃13;

/\$[a-z0-9_]+\[(.*?)\]/gi

＆＃13;

Answer 3

让我希望您想要图片，网站在500px;

容器中的正确位置

试试这个，它与我的新博客一起运作良好

<div style="width: 500px;">
  <img src="image_50.jpg" style="width:100%; height: auto;">
</div>

如果你需要它，那就会做出魔力

Answer 4

希望这会有所帮助

<div style="width: 500px; background: pink; padding: 10px;">
    <img src="http://4.bp.blogspot.com/-XGHxN3OtzOs/UXVmomnjriI/AAAAAAAAAh8/A0PKMFP8XcE/s1600/browser0.png" style="max-width:100%;">
</div>

Answer 5

因为您已将sizes:100vw与50w设置为将图片拉伸到父宽度，这就是为什么您的图片大于实际尺寸的原因。您还提到您无法更改sizes属性，因此最好的解决方案是删除w描述符

注意：如果未指定描述符，则会为源分配默认描述符：1x。

img {
  display: block;
}

<div style="width: 300px;border:1px solid red;">
  <img src="https://via.placeholder.com/50x50" sizes="100vw" srcset="https://via.placeholder.com/50x50" style="max-width:100%;">
  <br>
  <img src="https://via.placeholder.com/500x500" sizes="100vw" srcset="https://via.placeholder.com/500x500" style="max-width:100%;">
</div>

如何将size和srcset图像属性设置为max-width？

5 个答案: