1

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

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>
4

4 回答 4

1

只需给图像一个宽度和高度，100%而不是auto

http://jsfiddle.net/XRTba/

于 2013-10-23T04:16:54.527 回答
1

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

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

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

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

看到这个小提琴。

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

小提琴

重新调整大小并填充 div 手段，

小提琴

于 2013-10-23T04:19:00.630 回答
1

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

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

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

演示小提琴

原始图像

于 2013-10-23T04:12:29.007 回答
0

像这样简单的东西； 

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

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

请参阅此示例

于 2013-10-23T04:10:59.730 回答