Im работает над преобразованием существующего сайта в RWD, но боролся с заголовком. Следуя этому руководству (среди прочих на www) http://alistapart.com/article/fluid-images
Я не могу получить изображение заголовка на этой (или любой) странице, чтобы ответить соответствующим образом при масштабировании ниже 480px http://www.your-adrenaline-fix.com/dirt-bikes-for-sale.html
Я пробовал все, что я могу придумать или прочитать, но проклятое изображение не будет отображаться должным образом.
Если кто-то не возражал бы поделиться со мной тем, что мне не хватает, я был бы очень благодарен, и я благодарю всех и каждого из вас заранее.
Ниже приведен фрагмент из основного файла css и всего файла mobile.css, который вызывается с помощью медиа-запроса, когда страницы масштабируются ниже 480 пикселей
img {max-width:100%}
#PageWrapper{
width:960px;
border:5px groove #DDDDDD;
margin:15px auto;
background-image:url(../image-files/background.gif);
background-repeat:repeat-y;
background-color:transparent;
}
#Header {
color:#ffffff;
position:relative;
height:118px;
background-image:url(../image-files/motocross-ruts.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#Header a.header-home-link{width:960px;height:118px;display:block;}
#ContentWrapper{float:left;width:100%;}
#ContentColumn{margin:0 180px;}
#NavColumn{float:left;width:179px;margin-left:-965px;}
#ExtraColumn{float:left;width:179px;margin-left:-180px;}
#Footer{clear:both;width:100%;padding:8px 0;height:180px;border-top:3px groove #656565;}
#Footer .Liner{margin:20px;padding:0;}
The following is the mobile.css file
body {font-size:80%;}
.Liner{padding:2px;}
#PageWrapper{max-width:480px; margin:10px;}
#Header {min-height:39px;}
#Header a.header-home-link{display:none;}
#NavColumn{display:none;}
#ExtraColumn{display:none;}
#ContentWrapper{max-width:100%;background-image:url(../image-files/mobile320-background.gif);background-repeat:repeat-y;}
#ContentColumn{max-width:100%; margin:0;}
#ExtraNavTop {display:none;}
.Navigation{display:none;}
.mostPopular {display:none;}
Я весь день редактировал эти два файла и видел множество различных конфигураций. Просто не тот, который мне нужен, который будет соответствующим образом масштабированным изображением. Таким образом, я могу перейти к растущему списку дел, связанных с этим преобразованием RWD.
Стюарт К
Там, по крайней мере, два места, где у вас фиксированная ширина
#Header a.header-home-link
а также
#PageWrapper
Как ширина 960 пикселей, так и максимальная ширина - поэтому ваша страница никогда не будет меньше ширины, чем 960 пикселей - если окно браузера меньше, вы просто получите горизонтальную полосу прокрутки на теле.
Кроме того, как указывали другие, ваше изображение заголовка не является тегом img - это фоновое изображение - и поэтому не будет отвечать на img {max-width: 100%; }. }. Вы должны использовать background-size
, есть несколько значений, которые вы можете использовать, например, cover
, contain
, процент и т.д.
Посмотрите их на MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/background-size - и попробуйте их, чтобы узнать, какой из них работает для вас.
Взгляните на свой CSS #Header, ваше изображение заголовка - это фон !!! В вашем блоке заголовка не содержится никаких <img>
, масштабирование нечего. Вместо этого попробуйте использовать шаблон background-size
CSS3 или вставьте его в блок заголовка с помощью <img>
. CSS с вашего сайта http://www.your-adrenaline-fix.com/dirt-bikes-for-sale.html:
#Header {
// Here it is!!!
background-image: url("../image-files/motocross-ruts.jpg");
background-position: left top;
background-repeat: no-repeat;
color: #FFFFFF;
height: 118px;
position: relative;
}