Поскольку width: 100%;
, кажется, хорошо поддерживается, я бы предложил:
#header {
width: 100%;
padding: 0;
margin: 0;
}
#header img {
width: 100%;
padding: 0;
border: 0;
outline: 0;
}
<div id="header">
<img src="header.png" />
</div>
или
#header img {
width: 100%;
padding: 0;
border: 0;
outline: 0;
}
<img src="header.png" />
настройка просто width
означает, что соотношение ширины и высоты изображения будет сохраняться браузером.Имейте в виду, однако, что передача манипуляции с изображениями (масштабирование / изменение размера) браузеру телефона может привести к появлению менее чем приятных артефактов.
Если у вас есть возможность использовать изображения разных размеров,Вы можете вызвать тех, кто использует @ media query :
<link rel="stylesheet" href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/>
<link rel="stylesheet" href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/>
<link rel="stylesheet" href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>
И в этих таблицах стилей определите:
mobileStylesheet1.css
#header {
background: transparent url(path/to/840pxImage.png) 0 50% no-repeat;
}
mobileStylesheet2.css
#header {
background: transparent url(path/to/800pxImage.png) 0 50% no-repeat;
}
mobileStylesheet3.css
#header {
background: transparent url(path/to/480pxImage.png) 0 50% no-repeat;
}