javascript - 包含 2 张图片的响应式 DIv

Question

我正在使用来自 www.crosstec.de 的名为 xtec 的基于 Joomla 的网站模板，它不喜欢我在任何文章中使用基于 JQuery 的代码。

我正在尝试创建一个响应式 div，其中包含 2 个图像，并且我正在尝试完全在 css 中完成。

这就是我想要达到的目标。

1) 正常宽度的屏幕/浏览器有两个图像，每个 465 像素宽 x 507 像素高 - 并排放置，它们之间有 2 像素的间隙在浏览器窗口中水平居中

2) 当我减小屏幕/浏览器宽度时，图像都应按比例缩小，直到屏幕/浏览器宽度达到 850 像素，然后图像应移动到单列，然后两个图像彼此垂直对齐，当我缩小屏幕/浏览器时，它们的尺寸会继续按比例缩小，但仍居中。

我使用了“2-column CSS responsive layout with a responsive image”中的代码作为入门

我的站点 URL 是 http://www.clickandrent.mobi我尝试对其执行此操作的 2 个图像位于全宽 slider 下方和底部 2 个图像上方。

非常感谢 - 马丁

Answer 1

请将这段代码添加到您的样式表中，它应该可以工作。我刚刚在您的网站上对其进行了测试，它正在运行:

.group {
    text-align: center;
} 

.left {
    display: inline-block;
    width: 38.5%;
}

.left img {
    float: right;
}

.right {
    display: inline-block;
    width: 38.5%;
    margin-left: 3%;
}

.right img {
    float: left;
}

@media (max-width: 850px) {

div.left {
    float: none;
    width: auto;
    display: block;
    margin-bottom: 20px;
}

div.left img {
    display: block;
    margin: 0px auto;
    float: none;
}

div.right {
    float: none;
    width: auto;
    margin-left: 0%;
    display: block;
}

div.right img {
    display: block;
    margin: 0px auto;
    float: none;
}

}

2px 间隙:

25px 间隙: