代码之家 › 专栏 › 技术社区 › Bri Bri

如何在页面上水平和垂直居中显示图像,除非图像太大而不适合?

css html

Bri Bri · 技术社区 · 7 年前

我正在尝试使用HTML和CSS实现一个基本的图像查看器,其中图像保持在页面的中心,除非它太大而不适合。在这种情况下,用户应该能够滚动查看图像的其余部分,而不留任何空白。如果只有一个尺寸太大而无法匹配,则另一个尺寸将保持居中。页面上除了图像以外没有其他内容。

但是,图像的大小需要由比例因子指定,这样我就可以相对于原始大小放大或缩小它。这意味着我不能使用以像素为单位的显式宽度/高度,也不能相对于页面的大小来调整它的大小。我试过调整它 transform CSS属性,即 transform: scale(2.5) 但这通常会导致图像的顶部被切断。我也试过通过制作图像 display 属性设置为 inline-block 和它的 height 属性设置为 auto 以便我可以设置 width 我希望它按比例缩放,但我不知道如何像上面段落中描述的那样保持页面居中。

我怎样才能做到这一点?到目前为止,我已经尝试了十几种不同的方法来将一个元素集中在页面上,但没有一种方法能产生我要拍摄的这种精确行为。例如,我使用了flexbox来保持图像水平和垂直居中,但是一旦图像变得太高而无法容纳,图像的顶部就会被切断。

2 回复 | 直到 7 年前

Cornel 7 年前

有几种方法可以实现水平和垂直对齐。然而,它们通常是分开进行的,并且以不同的方式进行。你可以看看W3学校,他们对每一所学校都做了一些指导:

W3Schools Alignment Tutorial

此外,如果您愿意使用引导(使一切更容易,尤其是居中),您可以查看以下链接:

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>

Temani Afif 7 年前

您可以使用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?图像=1069“>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前