修復不同瀏覽器大小的圖像大小

當瀏覽器被調整大小或者我在一個更小或更大的顯示器上時，我的幻燈片圖像的大小有偏差。當我在我的大顯示器上圖像似乎放大。修復不同瀏覽器大小的圖像大小

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

修復不同瀏覽器大小的圖像大小

回答

相關問題