尺寸可变的图像，在已安装的居中元素内具有最大宽度/高度

Question

我有一个<a>标记，里面有一个<img> ，我想在屏幕上垂直和水平放置，但也要有一个max-height和max-width，以便在屏幕周围很好地放置空白。 它需要适用于任何屏幕尺寸的纵向和横向图像，并且根本无法裁剪图像。 但是，我无法获得图像的最大高度。

<a>也有一些位于图像左侧下方的文本，因此，我试图使<a>的大小与<img>的大小匹配，以使此文本的位置正确。

HTML：

<a href="#">
    <img src="image.jpg" alt="it's a picture">
    <p>Image Title</p>
</a>

CSS：

a {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    max-width: 60%;
    max-height: 60%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

p {
    position: relative;
    top: 10px;
}

Answer 1

当未指定宽度时，设置百分比最大宽度与设置常规百分比宽度几乎相同，因此我将链接大小更改为简单宽度/高度60％，希望可以。 现在，最简单的居中方法是Flexbox。 您可以在此处了解更多信息：

http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

我必须添加一个额外的div来包装图像和字幕，以便文本可以与图像的左下方对齐。

<a>
    <div>
        <img src="image.jpg"/>
        <span>asd</span>
    </div>
</a>

这是flexbox CSS：

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

a {
    display: block;
    width: 60%;
    height: 60%;
    border:2px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}

a span {
    display:block;
}

a div {
    max-width:100%;
    max-height:100%;
    display:block;
    margin:0 auto;   
}

a img {
    max-width:100%;
    max-height:100%;
    display:block;
}

这是这样的：

http://jsfiddle.net/9xgyu6a4/

也适用于人像图像：

http://jsfiddle.net/9xgyu6a4/1/

Answer 2

来自CSS-Tricks的这段代码将使您几乎可以将图像居中放置在屏幕中间：

<a href="#">
    <img src="/pathTo/image.jpg" alt="it's a picture">
    <span class="title">The Image's Title</span>
</a>

a {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title {
    position:fixed;
    width:327px;
    text-align:center;
}

诀窍是在<a>元素上使用固定位置，以便同时考虑顶部和左侧CSS属性。 随着视口变小，图像将不会调整大小，并且将保持在横向/纵向布局的中心。 假设图像的高度和宽度是已知的（在这种情况下，图像为327px x 327px-我不确定“可变尺寸图像”到底是什么意思） .title与图像的宽度相等。