Javascript 如何：两个div浮动，一个静止，另一个响应

在我的主容器

.Picture Black

中，有两个div向左浮动

.Picture Left

和

.Picture Right

我希望右div是静态的，而包含图像的左div是响应的

我已经设置了

。图片黑色{最大宽度：900px}

和

。图片左侧{最大宽度：640px}

和

。图片右侧{宽度：260px}

我想要完成的是使图像变小，同时将窗口大小调整到小于900px。只有左div和图像。我希望正确的div保持不变（静态）

我面临的是，图像在调整大小时不会变小，它不会改变，右div将转到左div的底部

HTML

<div class="Picture-Black">
<div class="Picture-Left">

    <div class="Picture"><img src="1.jpg" width="100%" /></div>
</div>
<div class="Picture-Right">
    <div class="Picture-Info">Hilarious</div>
    <div class="Picture-Info">Original</div>
    <div class="Picture-Info" style="margin-bottom: 5px">Comments 0</div>
    <div class="Picture-Uploader" style="margin-bottom: 5px">Farris</div>
    <div class="Picture-Rate">Hilarious</div>
    <div class="Picture-Rate">Funny</div>
    <div class="Picture-Rate">Okay</div>
</div>
</div>

<div class="Picture-Black">
<div class="Picture-Left">
    <div class="Picture-Caption">Men have it good. We don't need time to look good</div>
    <div class="Picture"><img src="1.jpg" width="100%" /></div>
</div>
<div class="Picture-R-Bottom">
    <div class="Picture-R-Div">
        <div class="Picture-R-Uploaer">Farris</div>
        <div class="Picture-R-Rate"></div>
        <div class="Picture-R-Share"></div>
        <div class="Picture-R-Comments"></div>
    </div>
    <div class="Picture-R-Div MT5"><img src="ad.jpg" width="100%" /></div>
</div>
<div class="Picture-Right">
    <div class="Picture-Info">Hilarious</div>
    <div class="Picture-Info" style="margin-bottom: 5px">Original</div>
    <div class="Picture-Uploader" style="margin-bottom: 5px">Farris</div>
    <div class="Picture-Info" style="margin-bottom: 5px"><span class="FL">Comments</span><span class="FR ColRed2">0</span></div>
    <div class="Picture-Rate"><span class="FL">Hilarious</span><span class="FR">123456</span></div>
    <div class="Picture-Rate"><span class="FL">Funny</span><span class="FR">123456</span></div>
    <div class="Picture-Rate"><span class="FL">Okay</span><span class="FR">123456</span></div>
</div>

---

您需要将其宽度设置为100%

.Picture img{
    width: 100%;
    max-width: 100%;
    height: auto;
}

。图片{
最大宽度：640px；
高度：自动；
溢出：自动；
}
.图片img{
宽度：100%；
最大宽度：100%；
高度：自动；
}

我想今天吃早餐，不是明天
令人捧腹的
起初的
评论0
法里斯
令人捧腹的
有趣的
可以

信不信由你，

元素是HTML5能够提供的最佳响应图像容器。使用

poster

属性，就像在

元素中使用

src

属性一样。以整页模式查看--调整大小是完美的。没有截断或失真，并保持其纵横比一致

片段

视频{
最大宽度：640px；
最小宽度：300px；
}

---

我认为你不应该使用较小的图像并拉伸它们

您应该使用与div大小匹配的图像大小，并将其缩小到较小的屏幕上

为包含的

设置

最大宽度

，然后将图像的

最大宽度

设置为

宽度的
100%


.mycoldiv{
边框：10px实心暗色；
宽度100%；
最大宽度：640px；
保证金：0自动；
文本对齐：居中
}
img{
宽度：100%
}
此Div为640px，但将针对较小的屏幕调整自身大小-它有一个红色边框
上面的图像比div大很多，但会调整自身大小以适应内部。
我找到了解决问题的方法

我所要做的就是将宽度设置为
width:calc（100%-260px）

计算器帮了我，现在它工作了

这是完整的解决方案

HTML

<div class="Picture-Black">
<div class="Picture-Left">

    <div class="Picture"><img src="1.jpg" width="100%" /></div>
</div>
<div class="Picture-Right">
    <div class="Picture-Info">Hilarious</div>
    <div class="Picture-Info">Original</div>
    <div class="Picture-Info" style="margin-bottom: 5px">Comments 0</div>
    <div class="Picture-Uploader" style="margin-bottom: 5px">Farris</div>
    <div class="Picture-Rate">Hilarious</div>
    <div class="Picture-Rate">Funny</div>
    <div class="Picture-Rate">Okay</div>
</div>
</div>

<div class="Picture-Black">
<div class="Picture-Left">
    <div class="Picture-Caption">Men have it good. We don't need time to look good</div>
    <div class="Picture"><img src="1.jpg" width="100%" /></div>
</div>
<div class="Picture-R-Bottom">
    <div class="Picture-R-Div">
        <div class="Picture-R-Uploaer">Farris</div>
        <div class="Picture-R-Rate"></div>
        <div class="Picture-R-Share"></div>
        <div class="Picture-R-Comments"></div>
    </div>
    <div class="Picture-R-Div MT5"><img src="ad.jpg" width="100%" /></div>
</div>
<div class="Picture-Right">
    <div class="Picture-Info">Hilarious</div>
    <div class="Picture-Info" style="margin-bottom: 5px">Original</div>
    <div class="Picture-Uploader" style="margin-bottom: 5px">Farris</div>
    <div class="Picture-Info" style="margin-bottom: 5px"><span class="FL">Comments</span><span class="FR ColRed2">0</span></div>
    <div class="Picture-Rate"><span class="FL">Hilarious</span><span class="FR">123456</span></div>
    <div class="Picture-Rate"><span class="FL">Funny</span><span class="FR">123456</span></div>
    <div class="Picture-Rate"><span class="FL">Okay</span><span class="FR">123456</span></div>
</div>

只需设置img
width:100%它将自动设置为父级的宽度。一个300像素宽的图像拉伸到覆盖640像素宽的容器意味着拉伸和失真。这在视觉上是不愉快的。@ILoveCSS我其实并不介意。你知道怎么做吗？但是如果img小于640px呢？在调整窗口大小时，如何将其设置为最大640px，同时将其调整为较小的宽度？哇？！我是+1，但闻起来有点不正统，这种方法有什么缺点吗？闻起来不正统？这听起来很不正统，但除了反语义之外，我还没有看到它的缺点。它可能有搜索引擎优化的问题，也许？这我要做一些研究。谢谢分享！我对代码进行了修改。问题似乎是图像的父div向左浮动。当没有浮动时，代码工作正常。但是由于某种奇怪的原因，当div向左浮动时，它将不起作用。不，它没有解决。我认为问题在于图像的父div向左浮动。我希望右div相同，但左div及其子对象在调整窗口大小时变小