wordpress 在响应式网页设计布局中隐藏图像。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12439647/
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
Hide image In responsive web design layout.
提问by Vivek Nath R
I want to hide an image only when it is viewed from mobile or tablets.
我只想在从手机或平板电脑查看时隐藏图像。
How can I do this?
我怎样才能做到这一点？
回答by carpenumidium
Using 'display: none' on imgs will still download the image which is not recommended as it's an http request gone waste (you can see this by looking at the network tab in your browser's inspector[right click, inspect element in Chrome]. just refresh the page and you'll see each asset being downloaded and the time it takes to download it.).
Rather you could make those specific images that you do not wish to load as background-images on divs.
Then all you need to do is:
在 imgs 上使用 'display: none' 仍然会下载不推荐的图像，因为它是一个浪费掉的 http 请求（您可以通过查看浏览器检查器中的网络选项卡来看到这一点[右键单击，在 Chrome 中检查元素]。只是刷新页面，您将看到正在下载的每个资产以及下载所需的时间。）。
相反，您可以将那些您不希望加载为 div 上的背景图像的特定图像。
那么你需要做的就是：
@media (max-width: x) {
.rwd-img {
background-image: none;
}
Of course you would have to define the height and width of the image for your div in your CSS, but that's a better option than sacrificing user experience. :)
当然，您必须在 CSS 中为 div 定义图像的高度和宽度，但这比牺牲用户体验更好。:)
Links of interest:
http://css-tricks.com/on-responsive-images/
http://mattstow.com/responsive-and-retina-content-images-redux.html
感兴趣的链接：
http:
//css-tricks.com/on-responsive-images/
http://mattstow.com/responsive-and-retina-content-images-redux.html
回答by devdigital
You'll want to use media queries, e.g:
你会想要使用媒体查询，例如：
@media (max-width: 979px) {
.img {
display: none;
}
}
You should also look into a framework such as Bootstrapwhich provides responsive utility classes.
回答by stefanglase
Using Cascading Style Sheets with a media query you can hide the image when the viewers screen resolution is lower than a given value like in this example when the screen width is smaller than 640 pixels.
使用带有媒体查询的级联样式表，您可以在查看器屏幕分辨率低于给定值时隐藏图像，如本例中屏幕宽度小于 640 像素的情况。
@media screen and (max-width: 640px) {
.my-image {
display: none;
}
}
