在一个分区内更改图像大小答案

【问题标题】：Change image size within a division在一个分区内更改图像大小
【发布时间】：2014-08-25 16:26:18
【问题描述】：

我在页面底部放置了一个分区。我把一个图像放到这个分区中，但是我不知道如何修改这个图像。问题可能是，<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>

【问题讨论】：

那么，您到底想对图像进行哪些更改？什么不工作？
内嵌的style 标签将影响该页面上的所有图片。

标签： html image stylesheet

【解决方案1】：

你可以这样做：

div img{

}

或者给 div 一个名字然后这样做

#div img{

}

或者你给img一个id如下

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

在CSS code 中使用 id 作为#mg。

或者你可以在img标签中定义class name。

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

在CSS Code 中将类用作.mg。

【讨论】：

【解决方案2】：

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

我会推荐Code Academy 来轻松学习课程。如果您已经熟悉 HTML，可以跳到 CSS 部分。

注意：如果您使用 google CSS，您会得到“w3schools”作为第一个结果。该网站通常在 Stack Overflow 上受到嘲笑。我不知道它是否真的那么糟糕，但我倾向于跳过它，因为其他人都对它有不好的看法。当然，如果您觉得有帮助，请致电。

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

【讨论】：

【解决方案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%;
}

【讨论】：