Question

我有一个％-width元素，其中包含最大宽度为100％的水平居中图像。

.container { width: 80%; )
.container img { 
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

只有当容器宽度超过原始图像宽度的100％时，我才想在容器上添加填充顶部或在图像上添加边距顶部。例如。当浏览器窗口非常大或图像很小时，使图像不能完全填充容器宽度。

有没有办法实现这个目标？

编辑：元素有一个类，而不是id。我的问题是指一个tumblr布局，每个帖子都会重复这些元素，所以我不能在模板中给他们一个id ...

Answer 1

如果容器的宽度是基于百分比的，并且图像的最大宽度设置为100％，则图像将始终展开以填充容器，无论其大小如何。意味着容器永远不会比图像大。假设这不是你的意思，而且图像是特定的宽度，我在下面提供了两种可能的解决方案。

听起来你想在整个屏幕宽度减小时应用边距（对于手机而言）。在这种情况下，最简单的方法是在CSS中使用媒体查询。

首先为您的网站扩展版本定义您喜欢的样式（桌面或大型平板电脑，无论您的目标是什么）。

#container { width: 80%; )
#container img { 
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

然后在CSS文件中进一步定义您的媒体查询，无论哪个断点对您的设计有意义。

@media (max-width: 320px){
    #container img {
        margin-top: 5px;
    }
}

每当屏幕宽度减小到320px或更小时，此媒体查询块中的所有CSS规则都将激活，允许您动态进行更改。

如果您没有处理这样的响应式设计并且屏幕大小不会改变，您可能需要使用一些JavaScript来处理样式更改。

首先，在CSS中创建一个添加边距的类。

.img-margin {
  margin-top: 5px;
}

在脚本标记内使用查询选择器来抓住您需要控制的元素并创建一个函数，该函数将处理相互比较的相应大小的检查并有条件地添加/删除边距类。

<script>    
    var container = document.getElementById('container');
    var image = document.getElementById('image');

    container.addEventListener('click', toggleMargin);

    function toggleMargin(){
        if (container.offsetWidth > image.offsetWidth){
            image.classList.add('img-margin');
        } else {
            image.classList.remove('img-margin');
        }
    }
</script>

我在上面的示例中使用了事件侦听器进行单击。您需要将其替换为发生的任何事件以触发更改。

我提倡使用媒体查询路径，因为它更优雅且不需要JavaScript，但JS方法可以根据您的使用情况提供更大的灵活性。

css根据图像宽度添加/删除元素填充

1 个答案: