Html 如何将大小和图像属性设置为最大宽度？

我有一个宽度为50px的图像和500px的容器。使用下面的代码会将图像拉伸100%宽度，即使我设置了

最大宽度：100%

，图像大小也将为500px

如何将图像设置为50px，但如果图像大小超过500px，它将被拉伸到500px，因为它是100%？注意：我不能将

size

属性设置为50px，因为首先我不知道实际的宽度，第二个图像必须是500px，如果它大于500px

我为什么问这个问题？我有一个博客，用

php

+

javascript

将图像上传到网站。Php脚本将图像大小调整为50px、200px、500px。但如果我上传的图像小于500px（例如，300px），

srcset

将只包含

image\u 50.jpg 50w，image\u 200.jpg 200w

---

p.s.我想知道为什么对于这样一个小图像的常见情况来说会如此复杂

您可以使用srcset-inside-picture标签来实现这一点

<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>

---

希望这能有所帮助，因为您在srcset中提供了50w。如果您增加该计数的值，那么您的图像将很好。不知道什么是工作的背面

<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>

---

我希望你想要的图像，无论什么样的站点都能正确地放入你的容器中，即

500px

试试这个，它和我的新博客配合得很好

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



如果您需要它，它将发挥神奇的作用
希望这对您有所帮助

<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>

因为您已经用
50w
设置了
大小：100vw
，这会将图像拉伸到父级宽度，这就是图像大于实际大小的原因。此外，您还提到不能更改
size
属性，因此最好的解决方案是删除
w
描述符

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


img{
显示：块；
}



为了清楚起见，您希望图像覆盖整个div，但不希望图像低于50px？不，伙计。。我希望图像始终保持50像素。上面的代码使它100%=500px为什么你刚才说你需要图像保持50 px，不管怎样。我的答案与img大小无关，它将被缩放到fit。恐怕你不能仅用html和css来实现这一点，你需要JavaScript或服务器端脚本。max-width:100%是相对于容器的，而不是对象本身。这意味着最大宽度：在500px的容器中，100%将始终返回500px。您应该在php端执行此操作，当您请求博客帖子时，搜索500px图像，如果没有，则获取50px图像。很好的技巧，它很有效！但我不明白怎么做。如果我们设置500w，为什么图片的宽度是50px？此外，我们欺骗浏览器：他们对待500w的图片是500px的宽度，但这不是真的。是的，我也不知道后端发生了什么。谢谢你的回复。但是，如果我们删除
w
描述符，我们如何创建集合呢？我的意思是在
srcset
属性中只有一个图像。我需要4个图像，比如
srcset=“img_50.jpg 50w，img_300.jpg 300w，…”