1

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

4

5 回答 5

1

您可以通过以 % 为单位设置最大大小来做到这一点，如下所示：

img{
    max-width: 100%;
}    ​
于 2012-05-18T18:42:40.133 回答
0

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

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%; />
于 2012-05-18T19:16:06.113 回答
0

阿赫塔尔，

在某种程度上，您可能不想禁用滚动。如果用户具有较高的缩放设置，他们应该能够左右滚动来查看您的页面，否则某些页面将不可用。例如 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>

如果这对您来说是不可接受的，那么据我所知，您需要使用脚本语言来获取每个用户的屏幕大小。然后，您可以根据报告的屏幕尺寸编写更详细的设置。

于 2012-05-18T19:12:00.220 回答
0

除非您使用 javascript，否则您可以同时拥有width或height设置 at 100%，但不能同时拥有两者。

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

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

背景大小示例

大多数浏览器都支持它，除了 IE < 9。支持表：http ://caniuse.com/background-img-opts

如果你走 javascript 路线，有很多插件，如supersized或backstretch。

于 2012-05-19T08:03:13.913 回答
0

样式中百分比度量的整个概念基于视口，视口基本上基于屏幕分辨率。即 100% 宽度的 div 在 800x600 中为 800 像素，在 1024*768 中为 1024 像素。你为什么关心分辨率？如果您想要灵活性，请以 % 为您的图像设置样式。

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

于 2012-05-18T19:32:08.687 回答