使用 CSS 进行图像居中和调整大小 [重复]

Question

我想要一个页面尽可能大地显示图像，但整个图像都在视图中，不改变图像的比例，并且在页面上居中（即全高，两边有边框，或全宽顶部和底部有边框）。有没有办法纯粹在 CSS 中做到这一点？我尝试了各种宽度/高度/最小宽度/最小高度属性的组合，但无法按我的意愿显示。

我还希望能够覆盖由带有背景图像的 div 组成的链接，该背景图像在悬停时会发生变化，其代码如下。我希望它位于图像的右上角：

HTML：

<div class="imagecontainer">
    <img src='gallery/images/<?php echo $image;?>' max-height="100%" width="100%"/>
    <div class="backbuttoncontainer">
        <a class="gallerybackbutton" href="gallery/index.htm"></a>
    </div>
</div>

CSS：

.imagecontainer{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.backbuttoncontainer{
    text-align:right;
    margin-top: 10px;
    margin-right: 10px;
    height: 38px;
    width: 100%;
    display: block;
}
.gallerybackbutton{
    background: url('icons/back_to_gallery.png') bottom;
    display: inline-block;
    height: 28px;
}
.gallerybackbutton:hover{
    background-position: 0 0;
}

Answer 1

也许这就是你想要的：JSFIDDLE，方法如下：

为您想要的任何尺寸（200x200 或 400x200 或 200x400）的图像创建一个容器，然后将图像放入容器中，style

vertical-align: middle // to make your image centered vertically, but it's relative to the inline element, so if you don't have any text or set line-height for it's siblings, it doesn't work
max-width: 200px; // or your container width
max-height: 200px; // or your container height
// this style is used for my example with the container max-width and max-height set to 200px

然后在容器中添加这个style

text-align: center; // to make it centered horizontally
width: 200px; // for example
height: 200px; // for example
border: 1px solid red; // only to show the container in this example
line-height: 200px; // this will make the inline element in the center from 200px, or so

或者在这个JSFIDDLE中使用pseudo element的另一种方法，你需要制作一个容器和要居中的图像：

<div class="block">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-7.jpg" class="centered" />
</div>

将pseudo element添加到容器block

.block:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; // to remove the spacing that's created by inline-block
}

并为要居中的图像添加style

.centered {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}

这是css tricks: centering in the unknown的解释

Answer 2

将图像设置为背景并尝试以下代码

class-name{
  background:url('1.jpg') no-repeat center center fixed ; 
  width:100%;
  height:auto;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size:cover;
  background-size: cover;

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale')";

Answer 3

要使用 margin: auto 你必须有一个静态宽度。 但是您的图像是像素图像，并且将具有该静态宽度。

只需将图像的宽度和边距设置为自动：

.backbuttoncontainer{
    margin:auto;
    height: 38px;
    width: 100px;
}