[英]CSS - Different header images for fluid grid layout website
EDIT : read further then the next 5 lines! 编辑:进一步阅读接下来的5行! My problem is not the logic of doing different css for mobile, tablet and desktop ( @media
query) - the problem is to change the IMAGE.SRC
attribute FROM INSIDE CSS. 我的问题不是为移动设备,平板电脑和桌面( @media
查询)做不同的CSS的逻辑 - 问题是改变IMAGE.SRC
属性FROM INSIDE CSS。
I'm trying to make a new fluid website and I'm trying to create 3 different header images: 我正在尝试创建一个新的流畅网站,我正在尝试创建3个不同的标题图像:
(all the images also vary in aspect ratio) (所有图像的宽高比也不同)
How do I get this to work? 我如何让它工作?
Currently I've tried to simply change the SRC in CSS for each CSS SECTION (mobile, tablet, desktop) 目前我试图简单地为每个CSS SECTION(移动设备,平板电脑,桌面设备)更改CSS中的SRC
Like this: 像这样:
#img_header {
src: url(img/header_m.png);
}
We all know that this doesn't work :D also I don't want to use background-image
instead. 我们都知道这不起作用:D我也不想使用background-image
。
What is the proper way to do this? 这样做的正确方法是什么?
Should I hack into the generated javascript code from Adobe Dreamweaver CS6 and change the .src from there ? 我应该从Adobe Dreamweaver CS6入侵生成的javascript代码并从那里更改.src吗?
I'm sure there is a css way, so tell me guys. 我确定有一种css方式,所以告诉我们。 Thanks 谢谢
UPDATE: I should have said that I already use media queries... 更新:我应该说我已经使用了媒体查询......
Here is my css: 这是我的css:
/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 97.826%;
padding-left: 1.0869%;
padding-right: 1.0869%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_m.png);
}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 93.451%;
padding-left: 0.7744%;
padding-right: 0.7744%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_t.png);
}
}
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 89.1614%;
max-width: 1232px;
padding-left: 0.4192%;
padding-right: 0.4192%;
margin: auto;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header.png);
}
}
NOW that you have read everything, you should imagine that I can't change the img.src
from inside css..., I think the only way to do so is to hack into the unformatted auto generated javascript from adobe DW cs6, isn't it ? 现在你已经阅读了所有内容,你应该想象我无法从css内部更改img.src
...,我认为这样做的唯一方法就是从adobe DW cs6入侵无格式自动生成的javascript,isn是吗?
If you are using single image in diff resolution then you need not to do take 3 images. 如果您在diff分辨率下使用单张图像,则无需拍摄3张图像。 Take the bigger image (for desktop size) and write the below css 拍摄更大的图像(对于桌面大小)并写下面的CSS
<header><img src="img/header_m.png" /></header>
CSS CSS
header img{max-width:100%}
I believe you are aware of media queries http://css-tricks.com/css-media-queries/ 我相信你知道媒体查询http://css-tricks.com/css-media-queries/
To change foreground image 要更改前景图像
If you want to change foreground images for different devices then try z-index 如果要更改不同设备的前景图像,请尝试z-index
.header{
background-color:red;
position:relative; height:auto}
img:first-child{
position:absolute; top:0; left:0;
z-index:-1; width:200px
}
img{
position:absolute; top:0; left:0;
z-index:10; width:200px
}
Change the z-index value for respective device width. 更改相应设备宽度的z-index值。
Demo here http://jsfiddle.net/5vpG7/70/ 在这里演示http://jsfiddle.net/5vpG7/70/
You can use CSS3 media queries
for your desired results..... 您可以使用CSS3 media queries
获得所需的结果.....
And I think you should read this article it will help you :- 我认为你应该阅读这篇文章它会对你有所帮助: -
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You can do different images by using media queries 您可以使用媒体查询执行不同的图像
Mobile 移动
@media only screen and (min-width : 320px) and (max-width : 480px) {
Your image for mobile
}
Tablet 片剂
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
Your image for tablet
}
...................... ......................
Now used to media query css 现在用于媒体查询css
@media screen and (min-width: 500px) and (max-width: 800px) {
// your css code here
}
i've now set another div inside the div_header, and give that child div a background image and a hardcoded width and height ( matches the individual images ), so i've faked a tag that now have ability to define (backgound-) image source via css instead of defining attribute of image source ;) 我现在在div_header中设置另一个div,并给那个子div一个背景图像和一个硬编码的宽度和高度(匹配单个图像),所以我伪造了一个现在有能力定义(backgound-)图像的标签通过css来源而不是定义图像源的属性 ;)
thanks anyway for your answers 无论如何,谢谢你的答案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.