cuốn sách gpt4 ai đã làm

CSS cho chế độ dọc và chế độ mặt đất với @media

In lại Tác giả: Walker 123 更新时间:2023-11-28 12:55:25 27 4
mua khóa gpt4 Nike

我有下面的 CSS。我想要的是一种流体/液体(因为缺乏正确的术语)css。我正在为移动设备开发,当我改变模式时 从纵向 View 到陆地 View ,我希望它流畅。现在的图像


在陆地 View 中效果很好,但在纵向 View 中,它在分隔符图像之后留下了很多空间。如果我从 css 中取出 !important 然后它开始切断图像。从昨天开始就一直在胡闹。任何帮助将不胜感激



div.parentDivision {
margin-top:2px;
}
div.parentDivision div {
height:281px;
kích thước nền: 100%;
lặp lại nền: không lặp lại;
}

@media screen and (max-width: 480px) {
div.parentDivision div {
height:151px;
kích thước nền: 100%;
lặp lại nền: không lặp lại;
}
div.parentDivision-separator-middle {
height:151px ;
kích thước nền: 100%;
lặp lại nền: không lặp lại;
}
}
Màn hình @media và (độ rộng tối đa: 320px) {
div.parentDivision div {
height:151px !important;
kích thước nền: 100%;
lặp lại nền: không lặp lại;
}
div.parentDivision-separator-middle {
height:151px !important;
kích thước nền: 100%;
lặp lại nền: không lặp lại;
}

}
div.parentDivision-separator-middle {
height:165px !important;
kích thước nền: 100%;
lặp lại nền: không lặp lại;
}
div.parentDivision .childDivision1 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision2 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision3 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision4 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision5 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision6 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision7 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.image {
margin: 1px;
}
div.parentDivision-separator-left {
nổi: trái;
width: 49%;
tràn: ẩn;
}
div.parentDivision-separator-right {
nổi: trái;
width: 49%;
tràn: ẩn;
margin-left: 2%;
}

div.parentDivision-separator-middle {
nổi: trái;
chiều rộng: 100%;
tràn: ẩn;
}
div.parentDivision-separator div.image {
phần đệm: 2px;
}
























这是jsfiddle

http://jsfiddle.net/yYSke/

如果您将浏览器变大或变小,您会看到图像被截断

câu trả lời hay nhất

我看到图像被截断了,无论是纵向还是横向(包括 !important 高度)。我也看不到任何差距。

以下是您想要的吗? http://jsfiddle.net/yYSke/2/show/

首先,我更改了背景图像,使它们具有 100% 的高度和自动宽度以保持纵横比。然后我将它们设置为在元素中居中:

div.parentDivision div {
height:281px;
background-size: auto 100%;
lặp lại nền: không lặp lại;
vị trí nền: trung tâm;
}

我还删除了媒体查询中的一些代码,因为您只是在重复基本样式中已有的代码。

现在您会注意到 parentDivision-separator-middle 中的图像太大而无法在不被切断或重叠的情况下放入容器中。这是因为在 parentDivision-separator-middle 上设置的高度小于设置图像的 childDivision7。我通过将高度设置为继承来避免这种情况:

div.parentDivision .childDivision7 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
height: inherit;
}

还有其他可以清理代码的区域,但我认为这可以满足您的需求?

关于带有@media的纵向模式和陆地模式的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16550369/

27 4 0
Xem sitemap của VNExpress