CSS动画图像宽度不起作用答案

【问题标题】：CSS animating image width not workingCSS动画图像宽度不起作用
【发布时间】：2016-04-12 14:25:23
【问题描述】：

我正在制作一个动画 CSS3 图片库，点击图片会将图片放大到更大的比例。但是，我觉得我在放大图像之前设置画廊样式的初始 CSS 代码已经强制宽度保持不变。我试图在:focus 参数和自定义:focus:nth-child 参数上设置宽度，但它保持相同的宽度。我忘了提到高度可以根据:focus 方法中给出的所需像素长度进行调整。你可以在我的Github Repository index.html文件和stylesheets/image-gallery.css找到源代码

我的猜测是.gallery a {... width:200px; ...} 是宽度不可更改的原因，但是在相同的方法中我也设置了高度，所以我非常困惑为什么它没有调整到所需的宽度。哦，顺便说一句，请原谅凌乱的 HTML 和 CSS 编码，我仍处于网站的构建阶段，稍后会整理代码。非常感谢您提前提供的帮助，它将帮助我很多！

【问题讨论】：

请尝试create a minimal, complete, and verifiable example。
@4castle 所以事实证明问题出在我的辅助 css 表中，它将 main-content div 中的所有图像设置为不超过 100% 的宽度。
哎呀！我很高兴你发现了问题。随意将其发布为答案，然后接受它作为您问题的答案。

标签： html css width image-gallery

【解决方案1】：

喜欢这个

img{
  width: 200px;
  transition: all .2s linear;
  &:hover{
    width: 400px;
  }
}

&lt;img src="http://www.placehold.it/200x200" alt="" /&gt;

【讨论】：

【解决方案2】：

您是否尝试过类似width:400px !important; 的方法？ !important 声明可帮助您轻松覆盖 CSS 规则上的属性。

【讨论】：

这是我的第一个想法，但看看 CSS，这不是问题。