Question

I have a website我需要适应不同的屏幕尺寸。其中大部分都非常简单，但我有一个幻灯片，需要调整屏幕大小并使图像居中在页面上。图像比页面宽，因此随着尺寸的变化，两侧都没有空白区域。

全尺寸图片宽4800像素，但随浏览器尺寸而变化。

如果只是一个尺寸的图像居中问题，我会用

#image{left:50%, margin-left:2400px;}

但是由于我根据可用空间调整图片的大小，所以我可以随时显示图片的整个高度，显示图像的宽度会发生变化，并且居中的方法也不好。

那么如何使用javascript检查当前图像宽度并更改margin-left属性，还是可以在css中完成？

编辑在这里添加一点css：

根据浏览器/屏幕尺寸的不同，这个位可以调整图像大小以适应高度。但缺少定心。

#slideshow{
max-height:100%;
width:auto;
background-color: blue;
overflow: hidden;
text-align: center;
z-index:5;}

.size-4{
max-height:100%;
width:auto;}

Answer 1

你可以制作一张桌子。 [空间] - [图像] - [空间]

空格必须是<td width="50% height="100%"> 图像`

这就是我在网站上处理它的方式

根据浏览器大小更改大小的中心图像

1 个答案: