Question

嘿，我不是一个程序员，只是试图破解我的投资组合网站，以显示一些图像。我希望页面上的图像居中，但也可以根据窗口宽度/高度的大小缩小尺寸（不是向上）。

我一整天都在搜索论坛，因为我不是程序员，所以大多数例子都让我感到困惑。我几乎能够使用下面的代码获得功能，但图像始终附加到页面顶部，根据窗口大小在其下方留下许多丑陋的空白区域。任何帮助将非常感激，在这一点上几乎停留。在单击缩放图标之前尝试在firefox中查看此页面的功能，但无法弄清楚。 http://www.tatianart.com/adriana_final_face_composite.jpg

在css文件中

html { margin:0; padding:0; height:100%; width: 100%; }
body { margin:0; padding:0; width:100%; height:100%; background:#171717; }
.wrapper { height:100%; width: 100%; padding-top:0%; padding-bottom:0px; text-align:center; background:#171717; }
.large_image { height:100%; width: 100%; }
.large_image img { max-height:100%; max-width:100%; width:auto; vertical-align:middle;}

我的html页面

<body>
<div class="wrapper">
<main id="main" role="main" class="large_image">
<img src="joyrideturbo\test.jpg">
</main>
</div>
</body>
</html>

Answer 1

请用这个替换你的css：

.wrapper {position: absolute; display: table; height:100%; width: 100%; padding-top:0%; padding-bottom:0px; text-align:center; background:#171717; }
.large_image {position: absolute; display: table-cell; vertical-align: middle; height:100%; width: 100%; }
.large_image img { max-height:100%; max-width:100%; width:auto;}

我让包装器认为它是一个表，而main则充当表格单元格。这允许内容垂直居中。

Answer 2

好吧，经过4个小时的黑客攻击并尝试不同的事情后，我得到了部分解决方案。图像仍然没有垂直缩小，但所有其他功能都有效，图像现在正确居中并且全屏显示正确。如果有人想出如何使图像垂直缩小，请告诉我。

HTML

<body>
<img src="joyrideturbo/test.jpg" style="width: 100%" />
</p>
</body>

CSS

html, body {background-color:#171717;}
body

img {
position: absolute;
top: -5px; bottom:0; left: 0; right:0;
margin: auto;
}

/*always show vertical scroll bar*/
html {overflow-y: scroll;}

Answer 3

好的，终于搞定了！我发布了第二个答案，因为上面的代码实际上创建了一个不同的效果，其中图像按比例缩放以匹配在某些情况下可能需要的窗口大小。任何方式，最终通过反复试验得到了这个。拖动窗口垂直/水平时，图像居中并缩小或缩小，仅将图像缩放到源艺术的最大尺寸。垂直滚动条始终存在，因此在从图库页面转换为完整尺寸图像时它们不是弹出式。

HTML

<body>
<div class="large_image">
<img src="joyrideturbo\test.jpg">
</div>
</body>

CSS

body { margin:0; padding:0; width:100%; height:100%; background:#171717; }
.large_image img { 
max-height:100%;
max-width:100%;
width:auto;
position: absolute;
top: -5px; bottom:0; left: 0; right:0;
margin: auto;
}

/*always show vertical scroll bar*/
html {overflow-y: scroll;}

尝试根据窗口大小缩放图像宽度/高度，同时还将图像置于页面中心

3 个答案: