将图片放在div中

时间:2014-12-02 17:43:46

标签: html css image

'我想在div中放置一张具有指定宽度和高度的图片。但是图像仍然大于div大小:

    <div class="Designs">

        <p>Designs</p>

            <div class="Thumbnails" data-animation="animated pulse">

                <a href="images/Halloween/bat.png"><img src="images/Halloween/bat_sm.png" width="130" height="76"/></a>

            </div>      
    </div> <!-- End Designs -->


<style>

#content .Designs .Thumbnails img {
margin: .3em 0;
min-width: 0;

}

#content .Designs .Thumbnails {
width: 143px;
height: 95px;
margin: auto;

}

</style>

我的网站供参考:http://mast.salemstate.edu/itc18244/Portfolio/

3 个答案:

答案 0 :(得分:4)

第44行的min-width: 246px中有styles.css

您可以使用以下方式覆盖:

.Thumbnails img {min-width: 0;}

或者更好的是,将min-width设置为您需要的图片,而不是所有图片(比img更具体的选择器)。

答案 1 :(得分:3)

在styles.css文件的第44行,您有:

img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}

min-width: 246px;规则优先。您需要删除该规则,或覆盖它。

答案 2 :(得分:1)

在CSS代码中替换这些: -

img {
     min-width: 246px;
     float: left; 
     margin-right: 2em;
     margin-top: 6px;
     margin-left: 1em;
    }

使用: -

img {
     min-width: 0px;
     float: left;
     margin-right: 2em;
     margin-top: 6px;
     margin-left: 1em;
    }