0

私は 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;
}
4

2 に答える 2

0

height:auto; を使用できます。画像が変更されたときにdivの高さを自動的に設定します。幅を自動的に設定する場合は、幅も同様です。

また、.twitterPP である必要があるときに .twitterpp と入力しました。クラスと ID に大文字を使用しないでください。

于 2013-03-09T20:39:23.313 に答える
0

このように設定してみてください -

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; 
}

次に、自分の好みに合わせて幅を設定し、パディングを設定して画像の配置を制御します

于 2013-03-09T20:49:23.553 に答える