我正在尝试使用HTML和CSS实现一个基本的图像查看器,其中图像在页面中保持居中,除非它太大而无法容纳。在这种情况下,用户应该能够滚动查看没有边距的图像的其余部分。如果只有一个尺寸太大而无法容纳,则另一个尺寸将保持居中。除了图像之外,页面上没有其他内容。
但是,图像的大小需要由缩放因子指定,以便我可以相对于其原始大小放大或缩小它。这意味着我不能使用以像素为单位的显式宽度/高度,也不能相对于页面大小调整它的大小。我尝试过调整它的transform
css属性,比如transform: scale(2.5)
,但这通常会导致图像的顶部被截断。我也尝试过这样做,将图像的display
属性设置为inline-block
,并将其height
属性设置为auto
,这样我就可以将其width
设置为我希望其缩放的百分比,但我不知道如何使其在页面上居中,如上段所述。
我如何才能做到这一点呢?到目前为止,我已经尝试了十几种不同的方法来使页面上的元素居中,但没有一种方法能达到我想要的效果。例如,我使用了flexboxes来保持图像的水平和垂直居中,但是一旦图像变得太高而不适合,(再次)图像的顶部就会被切断。
发布于 2018-05-29 07:24:45
有几种方法可以实现水平和垂直对齐。然而,它们通常是以不同的方式单独完成的。你可以看看W3Schools,他们对每一个都做了一些教程:
另外,如果你愿意使用bootstrap (让一切变得更容易,特别是居中),你可以看看下面的链接:
BootStrap Grid System Tutorial
下面是一种快速居中的方法。功劳归功于:This Post,我自己做了一些小改进。
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
text-align:center;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
发布于 2018-05-29 07:28:54
您可以使用flexbox和center with margin来获取以下内容:
body {
min-height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
}
<img src="https://picsum.photos/500/500?image=1069" >
如果你不想滚动应用max-height
/max-width
body {
height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
max-width:100%;
max-height:100%;
}
<img src="https://picsum.photos/500/500?image=1069" >
https://stackoverflow.com/questions/50574397
复制相似问题