图像溢出了css中的其他div元素

Question

我正在学习CSS基础知识并且不理解这一点。为什么图像比他所在的div类更大。 Div类指定了宽度和高度，但无论如何图像都要大得多。

Link to image example

html代码就像这样

<div id="logo"><a <%= link_to image_tag ('ecotechno_logo.png'), %></a> </div> 

徽标的CSS

#logo{
display: block;
padding:15px 0 0 30px;
float:left;
width: 268px;
height: 96px;
clear:both;

我是新手，所以任何帮助将不胜感激 :)谢谢

Answer 1

您需要修改HTML代码

 <div id="logo"><%= link_to image_tag ('ecotechno_logo.png'), '#' %></div>

在css中

#logo a img{
  width: 100%;
}

Answer 2

您还需要设置图像的宽度和高度。

类似的东西：

#logo img { width:100px;height:100px; }

随意将'100px'更改为您想要的图像大小

Answer 3

将您的图片网址添加到格式为的img标记：

<img src="" alt="" />

你必须在图像上指定宽度和高度而不是div。您可以在css或元素本身上执行此操作。

Answer 4

如果您希望截断图像，请使用

overflow: hidden

在父容器中。

如果您希望图像缩放到容器宽度，请使用

#logo {width: 268px;}
#logo img { width: 100%}

Answer 5

使用以下代码：

HTML

<div id="logo"><a id="image" <%= link_to image_tag ('ecotechno_logo.png'), %></a> </div> 

CSS

#logo{
display: block;
float:left;
clear:both; }

#image{
margin:15px 0 0 30px;
width: 268px;
height: 96px; }

Answer 6

设置为div，css，overflow: hidden;以及图像的宽度和高度，css或img标记。