css 这将一个未知大小的图像在一个框内垂直和水平居中。包装盒具有明确的宽度和高度。这是一个h

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 这将一个未知大小的图像在一个框内垂直和水平居中。包装盒具有明确的宽度和高度。这是一个h相关的知识,希望对你有一定的参考价值。

/*
<figure class='logo'>
    <span></span>
    <img class='photo'/>
</figure>
*/

.logo {
  display: block;
  text-align: center;
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #dddddd;
  padding: 4px;
  height: 74px;
  width: 74px;
}

.logo * {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
}

以上是关于css 这将一个未知大小的图像在一个框内垂直和水平居中。包装盒具有明确的宽度和高度。这是一个h的主要内容,如果未能解决你的问题,请参考以下文章

在页面上居中(垂直和水平)显示一张(未知尺寸的)图像

CSS 将图像置于div内部,垂直和水平,不知道图像的大小

仅使用 CSS 和 HTML 垂直和水平居中可变大小的图像放大(在 div 中)

使用 CSS 将图像垂直和水平居中

div+css实现未知宽高元素垂直水平居中

CSS:对象覆盖不使图像居中