gpt4 book ai didi

css - 如何使用 CSS 调整绝对定位图像的大小?

转载 作者:行者123 更新时间:2023-11-28 09:04:36 26 4
gpt4 key购买 nike

如何让 CSS 缩小两个绝对定位的图像,并排,在它们自己的 div 中但在父包装器中?

我看过许多 stackoverflow 问题,但找不到如何处理两个或更多图像的答案。我尝试了多个 CSS 示例,但无济于事。

我整理了一个模拟示例来模拟我正在尝试做的事情。参见 http://www.netplayhockey.com/test.php .请注意,图片宽度不同并且在它们自己的 div 中是有原因的(与我为此演示删除的一些绝对文本定位有关)。

页面宽度为1024px(image1 598px,image2 426px)。如果您减小浏览器的宽度,我希望两个图像都缩小。但是,相反,图像不会改变大小。事实上,image2 与 image1 重叠。

当浏览器宽度小于 600px 时(我选择 600px 作为示例,我真的希望这种情况发生在移动设备上而不是 iPad 上),我希望 image2 移动到 image1 下。以及要居中的图像。

注意:如果我使用相对定位和 float ,我得不到所需的居中结果(当屏幕小于 1024 像素时图像堆叠,并且它们不居中)。

附件是 HTML 和 CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="footer-wrapper">
<div class="footer">
<div class="footer-left"><img src="image1.png" /></div>
<div class="footer-right"><img src="image2.png" /></div>
</div>
</div>
</div>
</body>
</html>

body {
position:relative;
background:#999;
margin:0;
padding:0;
}
.container {
position:relative;
max-width:1024px;
margin:0 auto;
}
.footer-wrapper {
position:relative;
}
.footer {
position:relative;
}
.footer-left {
position:absolute;
left:0;
}
.footer-right {
position:absolute;
right:0;
}
.footer img {
max-width:100%;
text-align:center;
height:auto;
}
@media all and (max-width:600px) {
.footer-left {
position:relative;
text-align:center;
}
.footer-right {
position:relative;
text-align:center;
}
}

最佳答案

是的。谢谢你!我稍微修改了 CSS(删除了一些不需要的东西,让它像我想要的那样工作)。 - 我不得不重新编辑,以显示 CSS 代码。在我发表感谢之后

  .footer {             
position:relative;
}
.footer-left {
position:relative;
float:left;
width:58.4%;
}
.footer-right {
position:relative;
float:left;
width:41.6%;
}
.footer img {
max-width:100%;
height:auto;
}
@media all and (max-width:600px) {
.footer-left, .footer-right {
position:relative;
float:none;
width:100%;
height:auto;
text-align:center;
}
}

关于css - 如何使用 CSS 调整绝对定位图像的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26760447/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com