在 div 中放置图片答案

【问题标题】：Placing a picture inside a div在 div 中放置图片
【发布时间】：2014-12-16 03:59:05
【问题描述】：

我想在 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/

【问题讨论】：

标签： html css image

【解决方案1】：

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

您可以使用以下方法覆盖它：

.Thumbnails img {min-width: 0;}

或者更好的是，将min-width 设置为您需要的图像，而不是所有图像（您比img 更具体的选择器）。

【讨论】：

【解决方案2】：

在您的 styles.css 文件的第 44 行，您拥有：

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

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

【讨论】：

【解决方案3】：

在你的 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;
    }

【讨论】：

这适用于我的图片，但对于幻灯片图片它仍然没有在 div 中居中？所以我为箭头制作了两个额外的 div（由于某种原因无法为它们设置宽度）并希望“bat”图片以它自己的 div 为中心
这肯定会工作...... // #theDiv { width: 690px;高度：483px；文本对齐：居中；垂直对齐：中间； } #theImg { 最大宽度：600px;最大高度：400px； }
改变了，还是一样，如果你还没有，看看我的网站，你会明白我的意思。我认为有一个可能需要覆盖的css规则？ mast.salemstate.edu/itc18244/Portfolio
好吧，你也可以试试这个……#thediv{ display: table-cell;垂直对齐：中间 }
hmm..现在很有趣，现在图片在左下角，唯一不同的是我添加的是 display: table-cell;