使用 CSS 保持图像居中答案

【问题标题】：Keeping Images Centered using CSS使用 CSS 保持图像居中
【发布时间】：2013-11-01 04:35:05
【问题描述】：

我正在为课堂作业写一个小网页。我想将文本保留在一列内以及我计划放置图像的段落之间。如何在不专门更改其尺寸的情况下将图像保留在列内？

CSS

body {
        background-image:url("Some Image");
        background-size:cover;
        background-repeat:none;
    }

    .body-box {
                display:block;
                margin-left:33%;
                margin-right:33%;
                padding-left:3%; 
                padding-right:3%;
                border-left:4px solid black;  
                border-right:4px solid black;

                word-wrap:break-word; 
                text-align:justify;
                font-family:'Lato:300',serif; 

                color:black;
                background-color:white; 
            }

HTML

<div class="body-box">  

        <h1>Some Text</h1>

        <a href="Some Image"><img src="Some Link" 
        alt="Something Vague" width="auto" height="auto" align="center"></a>

        <h2>Some Text</h2>
        <p>Some Paragraph</p>

【问题讨论】：

现在好了，stackoverflow.com/questions/19532568/… ?

标签： html css image center

【解决方案1】：

您可以在您的站点中安排所有图像中心，

img{
  display:block;
  margin:0 auto;
}

如果你只有一个（这个）图像意味着，

.image1 img{
  display:block;
  margin:0 auto;
}

看到这个fiddle。

如果您需要重新调整大小的方法，

fiddle

重新调整大小并填充 div 意味着，

fiddle

【讨论】：

我遇到了与示例相同的问题。图像溢出边界，我希望它们重新调整大小并保持在边界内。
然后为图像提供固定的宽度/高度大小或提供%

【解决方案2】：

只需将图像的宽度和高度设为100% 而不是auto

http://jsfiddle.net/XRTba/

【讨论】：

【解决方案3】：

简单的事情；

 .body-box img {
     display:block;
     margin:0 auto;
 }

这会使图像居中。你的意思是不同的吗？

看到这个Example

【讨论】：

【解决方案4】：

您可以通过为这样的图像定义 css 来做到这一点

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

通过定义这个，你告诉图像的尺寸不超过父容器元素的高度/宽度

Demo Fiddle

Orignal Image

【讨论】：

我认为这很有效，因为图像具有 1:1 的纵横比，我的图像失真了。我想让我的图像尽可能接近其原始纵横比，同时仍留在块内。