Авто Изменение размера изображений в соответствии с браузером (css Html)

У меня есть проблема, чтобы моя страница изменялась и масштабировалась правильно. Basicaly, сайт будет открыт в браузерах и планшетах, на мобильных телефонах иногда. Херес фрагмент кода:Авто Изменение размера изображений в соответствии с браузером (css Html)

<style type="text/css"> 
div#container 
{ 
position:relative; 
width: 1439px; 
margin-top: 0px; 
margin-left: auto; 
margin-right: auto; 
text-align:left; 
} 
body {text-align:center;margin:0} 
</style> 

</head> 
<body> 
<div id="container"> 
<div id="g_image1" style="position:absolute; overflow:hidden; 
left:0px; top:8px; width:1318px; height:88px; 
z-index:0"><img src="images/LogoHeader.jpg" alt="" title="" border=0 
width=1318 height=88></div> 

<div id="image2" style="position:absolute; overflow:hidden; left:81px; 
top:100px; width:1317px; height:572px; z-index:1"><img 
src="images/TitlePicAerialSurveys.jpg" alt="" title="" border=0 
width=1317 height=572></div>

, например, image2 обыкновение автоматического изменения размера к размеру окна. есть ли способ изменить код, чтобы повлиять на все изображения, или я должен делать каждое изображение одновременно с кодом с автоматическим изменением размера?

источник

2016-06-06 Jason

попытайтесь изменить свою 'width' на' width: 100% 'или найдите @media – Spiderman

что не так с вводом кода прямо в вопрос? изображения не упрощают чтение. –

Можете ли вы разместить код в своем вопросе, пожалуйста? Спасибо :-) – Jer

Высота и ширина может быть установлен в автоматический режим (. Это по умолчанию означает, что браузер вычисляет ширину и высоту), или быть указано в значениях длины, как рх, см и т. д., или в процентах (%) содержащего блока.

В вашем случае процентов (%) выполнит эту работу. Вы также можете использовать медиа-запросы для лучшего структурирования своей страницы на разных устройствах.

источник

2016-06-06 06:52:44

Вы должны вручную добавить размер для каждого размера вашего окна (окно, планшет, мобильный). Это поведение текущего изображения нормальное.

Добавить конкретный размер изображения в css для каждого @media.

Мой пример:

@media screen and (max-width: 1280px) { 
    .imgClassResize { 
    width : yoursize 
    } 
} 

@media screen and (max-width: 1024px) { 
    .imgClassResize { 
    width : yoursize 
    } 
}

источник

2016-06-06 06:40:21

Вам не нужно делать это вручную .. Это будет жестко запрограммировано, и каждое изображение имеет разные размеры , Таким образом, для вас лучшее решение для этого, браузер автоматически растянет изображения, когда установлен '%'. – Jer

Я не хотел изменять размер КАЖДОГО изображения, но все изображения на нескольких носителях. Мой пример: @media screen and (max-width: 1280px) {.imgClassResize {width: yoursize}} –

Чем править его в вашем ответе. Вы можете сказать что-то вроде: «Добавить различные экраны с помощью запроса @media» и дать вашему ответу пример для него. :) – Jer

Почему бы не попробовать JQuery

предположим для изображения

<img id="img" src="images/image.jpg">

использовать следующий код, чтобы установить ширину до 100%

var w = innerWidth; 
$('#img').css({"width":w});

, если вы не хотите использовать JS , то вам нужно будет установить ширину в процентах

#img{ 
    width:100%; 
}

источник

2016-06-06 07:00:15

Авто Изменение размера изображений в соответствии с браузером (css Html)

ответ

Смежные вопросы