Question

如果我错误地提出这个问题，请原谅我。我会试着简单而准确地解释我的问题。首先，我在我的网站上使用名为PortfolioBox的在线网站构建器。

我要做的是在容器中剪切图像，而图像不会自动重新调整大小以适应容器的宽度。我使用的代码很简单：

HTML：

<div id="imageContainer">
    <img src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>

CSS：

#imageContainer {
    background-color: #333;
    width: 350px;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
}

以下代码应该会产生如下所示的内容：

但是，如果您在我的网站上检查相同代码的结果，您会看到被剪裁的图像正在缩小以适应容器的宽度：

因为我使用的是webhost / builder，所以这些页面预先构建了CSS代码。预加载的CSS中必定存在导致此问题的内容。但是，我无法访问该CSS代码。

问题

所以我的问题是，我能做些什么来覆盖这个问题？我有能力将CSS代码添加到页面，所以我希望我能以某种方式覆盖它。我非常感谢任何帮助..

这是关于JSFIDDLE http://jsfiddle.net/0e5nda2b/的页面（请注意我无法删除CSS代码，我只能添加）

提前谢谢。

Answer 1

您的文件中有一个CSS规则，它将max-width设置为100％。删除它。

.textContent object, .textContent embed, .textContent video, .textContent img, .textContent table {
max-width: 100%;
width: auto;
}

如果您不能简单地删除该规则，请创建自己的规则，将max-width设置为initial并使规则更具体，或使用！important（不推荐）。例如，#imageContainer img {max-width:initial;}

Answer 2

因为您无法修改现有的CSS，所以必须覆盖它。

您需要更加具体的选择器来定位相关元素，如下所示：

#imageContainer img {
    max-width: inherit;
}