Question

我正在为课堂作业编写一个小网页。我希望将文本保留在列中以及段落之间我计划放置图像。如何在不特别更改尺寸的情况下将图像保留在色谱柱内？

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>

Answer 1

你可以通过为你的图像定义css来实现这个目标

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

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

Demo Fiddle

Orignal Image

Answer 2

只需为图片指定100%的宽度和高度，而不是auto

http://jsfiddle.net/XRTba/

Answer 3

您可以在您的网站中安排所有图片中心，

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

如果您只有一个（此）图像，

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

请参阅此fiddle。

如果您需要重新调整尺寸，

fiddle

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

fiddle

Answer 4

简单的东西;

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

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

请参阅 Example

使用CSS保持图像居中

4 个答案: