重置通过 css 设置的图像宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9944237/
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
Reset image width and height set via css
提问by Mat
I'm trying to create a fluid-layout in html, containing images. For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
我正在尝试在 html 中创建一个包含图像的流体布局。现在，我支持 2 种尺寸的布局。默认布局用于显示 1000 像素宽的站点。如果屏幕足够宽（大于 1200 像素），我会使用 css 媒体查询增强许多方面。
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout. There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
我有一个 DIV 容器，默认布局宽度为 600 像素，增强布局宽度为 700 像素。里面有一个随机图像，我知道一些元数据（宽度和高度）。如果图像对于容器来说太大，我可能需要缩小图像的大小。
So I use this code to have a fluid-layout
所以我使用这段代码来实现流畅的布局
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
和风格
@media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
- Here is how it works:
- 下面是它的工作原理：
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container. Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
在默认布局的情况下，内联样式适用。所以图像被缩小到 600px/369px 以适合容器。否则，将应用媒体查询样式，并且图像处于其默认宽度/高度（我知道图像的宽度永远不会超过 700 像素，因此一切正常）。
- My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
- 我的问题来自图像的加载状态和浏览器保留的空间。chrome/firefox 的行为是相同的，但对我来说很奇怪。没有用 IE 测试（实际上不是我的优先事项）
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
对于默认布局，没问题，内联样式仍然适用。浏览器显示与图像对应的空白区域。
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
对于增强布局，“自动”尺寸适用。但是浏览器在没有完全加载时不知道图像的自然大小，并且看起来“自动”相当于0px。如果应用了为图像设置的宽度和高度属性，那将是完美的。但事实并非如此。结果是没有为图像保留空间，这不是我想要的行为。
- A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
- 我发现的第一个解决方案是为图像添加另一个内联 css 规则。如果我添加 "min-width:600px; min-height:369px" 图像的保留空间始终为 600x369 像素，而不是增强布局的 0 像素。那更好，但还不完美。
-- What do you think ?
- 你觉得怎么样 ？
- Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
- Should I use an other approach ?
- I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
- 是否可以“重置”css 而不是使用“auto !important”规则覆盖它？
- 我应该使用其他方法吗？
- 我可能会使用一些 javascript，但我认为依赖它是一个坏主意。实际上，我可能有很多类似于上述容器的容器。我更喜欢自动解决方案（css 非常适合）。
回答by Kim Yang Jacobsen
you can just set the widthor heightto initial.. that resets the Value on override..
您只需将width或设置height为initial.. 即可在覆盖时重置值..
回答by chipcullen
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and heightattributes, and then in your CSS add:
我看到的响应式图像的一般方法是让父元素（如 .container）通过媒体查询改变大小。在您的标记中删除宽度和高度属性，然后在您的 CSS 中添加：
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
由于您的父元素的大小由媒体查询规则决定，您的图像将相应地增长。
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
我提出这个问题是因为看起来您想使用相同的图像文件，但只是让它增长/缩小。主要缺点是较大的图像可能会加载到移动设备屏幕上，并增加页面加载。这是目前响应式设计面临的主要技术障碍，关于解决它的最佳方法存在很大的争论。
回答by Diodeus - James MacFarlane
Use .container IMG.someClass { ... }then you can remove the class name from the image to remove the CSS styling.
使用.container IMG.someClass { ... }然后您可以从图像中删除类名以删除 CSS 样式。
