响应式图像替换

时间:2012-08-30 08:47:56

标签: html image web responsive-design

我正在通过wordpress建立一个快速响应的网站,并希望在4种屏幕尺寸上显示3个单独的图像,图像是横幅广告。

使用我正在使用的主题我将代码添加到窗口小部件以指定每个单独的div和图像。由于我对设计的响应方式不熟悉,我有一个问题,我不确定理想的解决方法。

css指定每个大小的@media都工作得很好,但我的方法是将display none指定给我要显示但不显示的div,因为它被基本样式覆盖了。

通过在图像src元素中放置代码,可以指定每个媒体大小显示哪个图像?即

很抱歉,如果这有点难以理解,但是如果有人知道我正在谈论什么,并且知道显示响应式图像和替换图像的最佳方式,那将是很棒的。

1 个答案:

答案 0 :(得分:0)

您可以为每个图片分配唯一的ID或使用类名称,并在媒体查询中使用display:none;

示例:

@media (max-width: 768px){
  img.myImage{
  display: none;
 }
}