fix for image size in different browser sizes
Question
When the browser is resized or I am on a smaller or larger displayed monitor my slide images are skewed in size. When i'm on my larger monitor the image seems zoomed in.
http://www.bhhsall.com/the-monschein-team is the site.
2 answers
solution1
0 2014-12-19 04:12:14
If you are using Bootstrap css have it already, no need to write @mediaqueries in css. or you build your own css you should write @mediaqueries respect to screen sizes
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 */
}
solution2
0 2014-12-19 04:12:48
You can use Bootstrap and you have to understand responsive design in Bootstrap you will get build in CSS class .img-responsive by applying this you can achieve what you trying to do.
If you dont want to use Bootstrap then you can use CSS media queries to detect the screen size and apply you custom CSS to the image like this example:
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);
}
}
here is the fiddle demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.