相关疑难解决方法(0)

如何自动调整图像大小以适合div容器

如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽度:高度比?


示例:stackoverflow.com - 当图像插入编辑器面板并且图像太大而无法放入页面时,图像会自动调整大小.

html css image autoresize

1394
推荐指数
23
解决办法
230万
查看次数

背景图像缩放同时保持纵横比

我希望我的背景图像会像幻灯片一样自动更改.但无论浏览器窗口的大小如何,我都希望图像能够填满背景......如果按比例缩小,图像的宽高比不会改变.

这是我正在尝试做的一个例子:

http://www.thesixtyone.com/

我怎样才能完成这些任务?任何帮助都感激不尽.

html javascript css background-image

23
推荐指数
2
解决办法
5万
查看次数

使图像适合父div的大小

我创建了一个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)

输出是这样的:

在此输入图像描述

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

html css

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×3

html ×3

autoresize ×1

background-image ×1

image ×1

javascript ×1