我有一个需要适应不同屏幕尺寸的网站。其中大部分都非常简单,但我有一个幻灯片需要根据屏幕大小调整大小并将图像置于页面中心。图像比页面宽,以便在尺寸变化时两侧没有空白。
全尺寸图片的宽度为 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;}