修复不同浏览器大小的图像大小

当浏览器被调整大小或者我在一个更小或更大的显示器上时，我的幻灯片图像的大小有偏差。当我在我的大显示器上图像似乎放大。修复不同浏览器大小的图像大小

http://www.bhhsall.com/the-monschein-team是该网站。

2014-12-19 algib

也许您有问题要问？ – RobG 2014-12-19 03:16:38

如果您使用的是Bootstrap css，那么不需要在css中编写@mediaqueries。或者你建立你自己的CSS屏幕尺寸

HTML

<head> 
     <link rel="stylesheet" href="style.css" type="text/css" media="all"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head>

CSS

@media (min-width:320px) { 
/* css style */ 
// Example: .container {100%;} 
} 
@media (min-width:481px) { 
/* css style */ 
} 
@media (min-width:641px) { 
/* css style */ 
} 
@media (min-width:961px) { 
/* css style */ 
} 
@media (min-width:1025px) { 
/* css style */ 
} 
@media (min-width:1281px) { 
/* css style */ 
}

来源

2014-12-19 04:12:14

您可以使用Bootstrap，你应该写@mediaqueries尊重，你必须了解响应式设计在Bootstrap中，你将通过应用这个获得CSS类.img-responsive的构建，你可以实现你想做的事情。

如果你不想使用引导程序，那么你可以使用CSS媒体查询来检测屏幕尺寸和自定义CSS应用对像这样的例子：

HTML

<img src="image.jpg" 
    data-src-600px="image-600px.jpg" 
    data-src-800px="image-800px.jpg" 
    alt="">

CSS：

@media (min-device-width:600px) { 
    img[data-src-600px] { 
    content: attr(data-src-600px, url); 
    } 
} 

@media (min-device-width:800px) { 
    img[data-src-800px] { 
    content: attr(data-src-800px, url); 
    } 
}

这里是小提琴demo

来源

2014-12-19 04:12:48 Aminul

修复不同浏览器大小的图像大小

回答

相关问题