我在一个全屏页面的中心放置了一个徽标。
img.logo {
width: 920px;
height: 552px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -460px;
margin-top: -276px;
}
这很好用。 现在我想在不同的设备高度和宽度上使用不同的尺寸,所以我尝试使用媒体查询。
@media (max-width: 991px), (max-height: 460px) {
img.logo {
width: 235px;
height: 141px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -117px;
margin-top: -70px;
}
}
@media (min-width: 992px) and (max-width: 1199px), (min-height: 300px) and (max-height: 649px) {
img.logo {
width: 533px;
height: 320px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -276px;
margin-top: -160px;
}
}
@media (min-width: 1200px), (min-height: 650px) {
img.logo {
width: 920px;
height: 552px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -460px;
margin-top: -276px;
}
}
但如果两个参数同时发生变化,这仍然有效。 我希望它分开,因此您可以更改浏览器高度和图像大小更改或浏览器宽度或两者。
图像(徽标)应始终位于页面中间。
答案 0 :(得分:1)
如果您以这种方式将图像置于其父级中心,则不需要所有这些边距偏移:
img.logo {
width: 350px; //or whatever
height: 350px; //or whatever (maybe auto)
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
然后,您可以使用媒体查询来更改只是图像大小:
@media (max-width: 400px) {
img.logo {
width: 150px;
height: 150px;
}
}