参数未应用于 img答案

【问题标题】：parameters are not being applied to the img参数未应用于 img
【发布时间】：2023-01-03 23:25:02
【问题描述】：

我在尝试编辑我的课程参数时遇到问题。我已经给了我的 img 一个类，当我转到 css 并尝试更改“显示、对象适合、边框半径、宽度等”等参数时，css 不会识别它。

这是我编写的代码：

<div class="img-container" id="img-div">
<img 
src="https://imagens.ebc.com.br/Xfd7n6tdKqubij-UlWGOPQKQhlk=/1170x700/smart/https://agenciabrasil.ebc.com.br/sites/default/files/thumbnails/image/52483379892_a0ecea7e5c_o.jpg?itok=b6o3tMQ4" alt="tite" class="tite-image" id="image" />
    <div class="caption" id="img-caption">
      Tite apresentando a lista de convocados para o mundial do Qatar.
      </div>
    </div>

这是 css 部分：

.tite-image{
  object-fit: contain;
  border-radius:10px;
max-width: 100%;
display: block;
height: auto;
margin: auto;
}

先感谢您

【问题讨论】：

它在 jsfiddle 上工作：jsfiddle.net/4nsdv26w 它是唯一不起作用的 css 类吗？
欢迎来到堆栈溢出！请发布您的<head> 标签的内容，并向我们展示您的文件结构是什么样的。您的 CSS 文件似乎没有正确链接。
是的，唯一的
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="向先生致敬. Adenor Leonardo Bacchi" /> <title>Adenor Leoanrdo Bacchi</title> <link rel="stylesheet" href=".styles.css" </head> 这就是 <head> 的样子。 img 尺寸没有像我指定的那样改变

标签： css

【解决方案1】：

看起来你的代码不错。也许有什么东西从上面挡住了它？尝试将您的样式添加到 img-container：

.img-container img {
  object-fit: contain;
  border-radius:10px;
  max-width: 100%;
  display: block;
  height: auto;
  margin: auto;
}

【讨论】：

什么可能从上方阻挡？
其他 CSS 代码。正如有人评论说 jsfiddle.net/sytrus/6vn3x4b8 它在 jsfiddle 上运行得很好。找到问题的捷径 - 在 chrome 开发工具中打开你的页面并查看元素 > 样式以找到问题