禁用img缩放/调整大小？（如何获得“显露效果”？）答案

【问题标题】：Disable img scaling/resizing? (How to get "reveal effect"?)禁用img缩放/调整大小？（如何获得“显露效果”？）
【发布时间】：2012-01-18 02:07:27
【问题描述】：

我有一个 img 元素。但是我想在让它变宽的同时关闭它的大小调整“能力”。

这是一个动画，让我的形象从左到右慢慢地露出来。

但是如果调整大小/缩放到宽度是开启的/p>

我正在使用 javascript 使它变宽，有没有办法关闭图像大小调整？也许我可以将 css display 或 position 设置为什么？

我只为 iPad 开发，所以我最好的解决方案是 CSS3 属性或 HTML5 方法。

【问题讨论】：

css-background 属性（通常？）不受 img 元素宽度的影响，尽管还有其他方法（例如将 img -- 固定宽度 -- 也隐藏在不断增长的 div 中） .
你可以使用 jquery show 如api.jquery.com/show中所述

标签： javascript html css

【解决方案1】：

这其实很像another question from today。

你可以把你的图片放在一个 div 中；给 div 样式

overflow:hidden; 
width:0px;

然后将 div 的宽度设置为图像的全宽，它会从左到右慢慢显示出来。

【讨论】：

【解决方案2】：

使用包装 div 和 overflow:hidden; 非常容易我使用 CSS3 动画，但概念才是最重要的。

div{overflow:hidden; 
    -webkit-animation: imageHide 5s infinite;}

@-webkit-keyframes imageHide {
        0%   { width: 0px; }
        100% { width: 300px; }
}

Demo

【讨论】：