Question

我有一张图片，链接中是1039x1039 ......这样的话：

HTML：

<a href="#"><img src="img.png" alt="alt"></a>

CSS：

img {
    align-self: center;

    height: 100%;
    width: auto;
    border: none;
    }
a {
    flex: 0 0 0;
}

当然容器设置为display:flex。问题是，当我加载页面时，img重新调整为80x80但链接为1039x80。只有在单击链接后，它才会重新缩放到80x80。这就像刷新样式后的flexbox检查img宽度一样？有什么想法吗？

编辑：我在这里重新创建了问题：https://jsfiddle.net/287cLqvh/6/

Answer 1

at System.Security.Cryptography.CryptographicException.ThrowCryptographicException(Int32 hr) at System.Security.Cryptography.X509Certificates.X509Utils._LoadCertFromFile(String fileName, IntPtr password, UInt32 dwFlags, Boolean persistKeySet, SafeCertContextHandle& pCertCtx) at System.Security.Cryptography.X509Certificates.X509Certificate.LoadCertificateFromFile(String fileName, Object password, X509KeyStorageFlags keyStorageFlags) at System.Security.Cryptography.X509Certificates.X509Certificate2..ctor(String fileName, String password, X509KeyStorageFlags keyStorageFlags) at Program.Main()元素中的src后面缺少等号（=）。

＆＃13;

img

＆＃13;

img {
    align-self: center;
    height: 100%;
    width: auto;
    border: none;
    }
a {
    flex: 0 0 0;
}

＆＃13;

Answer 2

flex是一个适用于Flex容器子节点的属性。在这种情况下，您的图像的Flex容器是<a>，该容器的子容器是<img>。要使flex生效，您必须在display: flex;代码上<a>。

此外，我删除了您的flex: 0 0 0;，因为我不确定您要尝试实现的目标。我认为您只想使用flex: 0 1 auto; - 但您不需要指定它，因为它是flex的默认值。

无论如何，我认为您应该发布可用的完整代码，以便更好地处理代码的实际情况。

以下是一个例子：https://jsfiddle.net/qox4fa98/

您可以参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

事实证明<a>是一个内嵌元素，因此它不会被flexbox调整大小。我必须将此样式添加到<a>：

display: inline-block;
height: 100%;
width: auto;

链接中的Flexbox图像无法正常工作

3 个答案: