HTML5，将图像拉伸100％直至其原始大小

Question

在我的网站上，用户可以发布文章和图片，例如：

  

blabla bla bla

那些文章被div包围，在这个div中，所有img元素都设置为100％widthed：

<div id="articles">
blabla <img src="/image.png" /> bla bla
<hr>
blabla <img src="/image.png" /> bla bla
</div>

#articles img
{
    width: 100%;
}

我的目标是使其具有响应性：如果您在智能手机上浏览，固定尺寸的图像不会破坏设计，遗憾的是我无法使用＆＃34; max-width＆＃34;因为我不知道尺寸。我不能要求用户同时上传图片和设置宽度，高度属性。有一个很好的解决方案吗？

Answer 1

您想指定max-width：

#articles img
{
    max-width: 100%;
}

这意味着图片的原始大小永远不会超过100%。

<强> SEE FIDDLE

Answer 2

将div编辑为最大100％而不是图像：

<div id="articles">
blabla <div id="image"><?php echo $image ?></div> bla bla
</div>

    #image
    {
    max-width: 100%;
    }
    #articles img {
    width: auto;
    }