Question

使用HTML，可以根据屏幕分辨率调整图像大小吗？就像在大屏幕上查看完整图像而不需要滚动但是在小屏幕上需要滚动一样，它是否可以自行调整大小以便即使在使用HTML代码的特定宽高比的小屏幕上也不需要滚动？

Answer 1

您可以通过将％max设置为％来完成此操作：

img{
    max-width: 100%;
}

Answer 2

阿赫塔尔，

在某种程度上，您可能不想禁用滚动。如果用户具有高缩放设置，则他们应该能够向左和向右滚动以查看您的页面，否则某些页面将无法使用。例如http://css-tricks.com/screen-resolution-notequalto-browser-window/

如果我放大此页面，Chrome中没有可用的左右滚动条。

除此之外，使用％是让您的内容在大多数浏览器和设置中看起来都很好的好方法。您可以使用％高度或宽度设置图像，容器，正文等。请记住，为了保持照片的宽高比，您需要设置宽度，然后自动设置高度。

<style>
.leftColumn{width:20%;}
.leftColumn{width:80%;}
.somePic{width:20%;height:auto;}
.somePic2{width:80%;height:auto;}
</style>

<body>

<div class="leftColumn">
<img class="somePic" src="somePic.jpg" />
</div>

<div class="rightColumn">
<img class="somePic2" src="somePic2.jpg" />
</div>

</body>

如果您不接受这一点，那么据我所知，您需要使用脚本语言才能获得每个用户的屏幕大小。然后，您可以根据报告的屏幕大小编写更详细的设置。

Answer 3

这对我有用，（我希望我能清楚地理解你的问题）

Css

  #myimage{
        bottom: 0; 
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
    }

<强>标记

<img src='xyz.jpg' id='myimage' />

或使用你可以使用内联样式，如果这看起来很困难，只需将此代码放在body标记内。

<img src='xyz.jpg' style='bottom:0;left:0;position:fixed;right:0;top: 0;width: 100%; />

Answer 4

样式中百分比度量的整体概念基于视口，该视口基本上基于屏幕分辨率。即100％宽度div在800x600中为800 px宽，在1024 * 768中为1024px。你为什么要关心解决方案？如果您想要灵活性，请以％为单位设置样式。

示例：http://jsfiddle.net/upavn/

Answer 5

您可以将width或height设置为100%，但不能同时设置为两者，除非您使用javascript。

CSS3具有很好的属性，称为background-size：

background:url(../images/myimage.jpg) no-repeat center center;
background-size:cover;

background-size example

大多数浏览器都支持它，除此之外，IE＆lt; 9.支持表：http://caniuse.com/background-img-opts

如果您使用javascript路线，则有许多插件，例如supersized或backstretch。

可以使用HTML调整图像大小吗？

5 个答案: