Question

当浏览器调整大小或我在更小或更大的显示器上时，我的幻灯片图像的大小会有所偏差。当我在更大的显示器上时，图像似乎放大了。

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

Answer 1

如果您正在使用Bootstrap css已经拥有它，则无需在css中编写@mediaqueries。或者你建立自己的CSS，你应该写@mediaqueries尊重屏幕尺寸

<强> 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 */  
}

Answer 2

您可以使用Bootstrap并且您必须了解Bootstrap中的响应式设计，您将通过应用此类来构建CSS类.img-responsive，您可以实现您想要做的事情。

如果您不想使用Bootstrap，那么您可以使用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

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

2 个答案: