Когда размер браузера изменен или я нахожусь на меньшем или большем отображенном мониторе, мои слайдовые изображения искажены по размеру. Когда я нахожусь на моем более крупном мониторе, изображение кажется увеличенным.Исправить размер изображения в разных размерах браузера
http://www.bhhsall.com/the-monschein-team это сайт.
Если вы используете Bootstrap css, у вас уже нет необходимости писать @mediaqueries в css. или создать свой собственный 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 */
}
Вы можете использовать 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
Возможно, у вас есть вопрос? – RobG