1

我正在尝试将图像缩放到它包含的 div 的 100% 宽度（它是一个响应式布局，div 的大小根据窗口大小而变化，因此需要缩放图像）。

这是我的CSS：

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 10px;
    float: left;
}
@media (max-width: 520px) {
.container {
    width: 100px;
    height: 100px;
    margin: 5px;
}
}

.container img {
    width: 100%;
    }

使用此 css 可以很好地调整图像大小，除非它们是链接。像这样：

<div class="container">    
<a href="http://andreaalice.com/index.shtml"><img src="images/image.jpg"></a>
</div>

图片链接保持在 200 像素的完整大小，而不是缩小到 100 像素的 div 的 100%。

任何人都知道我怎样才能使链接的图像按比例缩放？

4

3 回答 3

2

你有没有尝试过：

.container a img {
    width: 100%;
 }

?

我做了一个简单的例子，似乎可以满足您的需要。

于 2013-05-25T06:23:25.947 回答
0

我使用柔性显示解决了这个问题。尝试将其粘贴到您的检查元素工具中

element.style { display: flex; width: 100%; }

于 2015-02-19T12:58:18.970 回答
0

我设法在一个简单的演示中重现了这个问题。只需将结果窗口缩小到 < 520px，图像应该会调整大小，但第一个不会。

问题似乎是以下规则

.element * {
    position: absolute;
    margin: 0;
}

删除position:absolute;修复问题。我认为这是因为第一张图像上的周围<a>没有width. 添加

.element a {
    width:100%;
}

解决了页面宽度 < 520px 时的问题，但随后会以 >= 520px 打破页面！所以我只建议删除position:absolute，除非您出于任何其他原因需要它。据我所知，它似乎不会影响页面上的任何其他内容。

最后（这只是次要的），但所有<img>标签都应该是self-closing。该页面几乎验证。

于 2013-05-26T08:32:31.593 回答