html

Question

我正在学习 CSS 基础知识，但不明白这一点。为什么图像比他所在的 div 类大。div 类具有指定的宽度和高度，但无论如何图像要大得多。

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;

我在这方面很新，所以任何帮助将不胜感激:)谢谢

score 2 · Accepted Answer

需要修改html代码

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

在 CSS 中

#logo a img{
  width: 100%;
}

score 1 · Accepted Answer

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

就像是：

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

overflow: hidden

在父容器中。

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

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

score 1 · Accepted Answer

使用以下代码：

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

score 1 · Accepted Answer

在 css 中为 div 设置overflow: hidden;，在 css 或 img 标签中为图像设置宽度和高度。