CSS 图像宽度/高度过渡不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8419111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image width/height transition not working
提问by Tyilo
Using a transition when enlarging an image doesn't seem to work in chrome.
放大图像时使用过渡似乎不适用于 chrome。
HTML:
HTML：
<img src="foobar.png">
CSS:
CSS：
img
{
float: left;
margin-right: 10px;
border-radius: 10px;
width: 200px;
-webkit-transition: width 1s ease, height 1s ease;
}
img:hover
{
width: 100%;
}
Fiddle: http://jsfiddle.net/6Dk4D/
小提琴：http: //jsfiddle.net/6Dk4D/
What is wrong?
怎么了？
回答by ayyp
It won't work with percentages it seems. Also, if you wish to transition heightas well, you need to declare it in the orignal imgstyling. Shown here: http://jsfiddle.net/Skooljester/6Dk4D/1/it works if you specify a widthin pixels for the hover.
它似乎不适用于百分比。此外，如果您也希望过渡height，则需要在原始img样式中声明它。此处显示：http: //jsfiddle.net/Skooljester/6Dk4D/1/如果您width为悬停指定一个以像素为单位的像素，它会起作用。
Edit: If you specify the first widthas a percentage then the second can be defined with a percent as well and still work. Thank you Tyilo
编辑：如果您将第width一个指定为百分比，那么第二个也可以用百分比定义并且仍然有效。谢谢蒂洛
回答by RustyDev
You can also use a max-widthtrick. Set a high max-widthamount on the hover and the original image width will be respected by the transition.
你也可以使用一个max-width技巧。max-width在悬停时设置一个高值，过渡将遵循原始图像宽度。
