Question

我在页面底部放置了一个部门。我把图像放到这个部门，但我不知道如何修改图像。问题可能是，<img>的内联样式是为所有图像设置修改规则。我有一个内联样式表，其中包含<div>的代码和HTML代码。

我的CSS代码如下所示：

<style type="text/css">
 img {
      image-align: center;
      padding: 10px;
      height: 200px;
      width:  140px;
  }

 div {
     position: absolute;
     right: 10px;
 }
 </style>

我的HTML代码就是这样：

 <div align="center" >
     <img src="images/music_banner.jpg" >
 </div>

Answer 1

你可以这样做：

div img{

}

或给div命名并执行此操作

#div img{

}

或者您为img提供id，如下所示

<div>
<img id="mg"/>
</div>

在#mg中使用ID为CSS code。

或者您可以在class name代码中定义img。

<div>
<img class="mg"/>
</div>

在.mg中将班级用作CSS Code。

Answer 2

您可以尝试更多地了解 CSS selectors ：这些规则告诉浏览器您要将以下规则应用于哪个元素。

我建议Code Academy以便于学习。如果您已经熟悉HTML，可以跳到CSS部分。

注意：如果你是谷歌CSS，你将获得＆＃34; w3schools＆＃34;作为第一个结果。该网站通常被Stack Overflow嘲笑。我不知道它是不是真的那么糟糕，但我倾向于跳过它只是因为其他人对它都有不好的看法。如果您觉得它有帮助，请致电。

我应该注意，我喜欢使用W3C (World Wide Web Consortium) website作为参考，因为他们是试图使一切标准化的人。不过，这是一本非常技术性的读物。

Answer 3

在HTML代码中创建div元素：

<div class="parent">
    <img src="image">
</div>

将其添加到您的CSS代码中：

.parent {
    width: 42px; /* I took the width from your post and placed it in css */
    height: 42px;
}

/* This will style any <img> element in .parent div */
.parent img {
    height: 100%;
    width: 100%;
}

在分区内更改图像大小

3 个答案: