如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽度:高度比?
示例:stackoverflow.com - 当图像插入编辑器面板并且图像太大而无法放入页面时,图像会自动调整大小.
我希望我的背景图像会像幻灯片一样自动更改.但无论浏览器窗口的大小如何,我都希望图像能够填满背景......如果按比例缩小,图像的宽高比不会改变.
这是我正在尝试做的一个例子:
我怎样才能完成这些任务?任何帮助都感激不尽.
我创建了一个div(div1),它等于浏览器窗口大小.然后我在父div(div1)中创建了另一个div(div2).然后我在第二个div(div2)中放置了一个图像.我的浏览器窗口大小为1360X638,我的图像大小为1600*1200.
我希望图像根据父div(div1)的大小来适应自己.所以图像(大于窗口大小)必须适合第二个div(div2),它等于窗口大小),这个图像将完全适合div的大小(所以,没有任何滚动或裁剪显示中的图像).
我搜索了一段时间.我找到的解决方案是将最大高度和宽度设置为100%.我这样做了
我写了这部分:
<div style="max-width: 100%; max-height: 100%; background-color: red; margin-right: 0px; padding: 2 2 2 2; overflow:visible;">
<div style="max-height: 100%; max-width: 100%;">
<img style="max-width: 100%; max-height: 100%; overflow:visible;" src="1.jpg" />
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
输出是这样的:

您可以看到右侧有一个滚动条.我不希望那里.