Question

我有一个div，当我在潜水中放置一张照片并且只设置图片的宽度以便它可以有适当的比例时div不会扩展到div的大小？

请帮助你？

（如果你运行下面的代码，我希望粉红色div在我添加任何内容时展开）

非常感谢！

HTML

<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="gigantic">
        <div class="main">
            <div class="twitterPP">
                <img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
            </div>
            <div class="mainMedia">
                <img src="http://rack.1.mshcdn.com/media/ZgkyMDEzLzAzLzA4LzY1L2F0dC4yZjU4Mi5qcGcKcAl0aHVtYgk5NTB4NTM0IwplCWpwZw/91fe06f6/108/att.jpg">
            </div>
        </div>

        <div class="main">

        </div>
    </div>
</body>
</html>

CSS

.gigantic
{
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    background-color: #0f0;
    padding: 6px;
    margin-top: 100px;
}

.main 
{
    width: 800px;
    background-color: #f0f;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 100px;
}

.twiterpp
{
    width: 60px;
    float: left;
    margin-right: 50px;
    margin-left: 50px;
}

.twitterpp img
{
    width: 55px;
    height: 55px;
    border-radius: 3px;
    margin-left: 6px;
    margin-top: 6px;
    position: relative;
}

.mainMedia
{
    float: right;
    width: 700px;
}

.mainMedia img
{
    width: 700px;
}

Answer 1

你可以使用height：auto;在图像更改时自动设置div的高度。如果要自动设置宽度，宽度也相同。

你也应该输入.twitterpp .twitterPP。避免对类和ID使用大写字母。

Answer 2

尝试这样设置 -

HTML

<div class="img-box"></div>

Css -

.img-box {
background-image: url(images/yourimg.gif);
background-repeat: no-repeat;
width: 100px;
padding: 0px 0px 0px 0px; 
}

然后设置宽度以匹配您自己的首选项和填充以控制图像放置

Div没有扩大图片

2 个答案: