html - 标签不遵守与使图像溢出相同的宽度/高度

Question

我有以下html

 <div class="image-wrap">
    <img src="{{p.image_url}}">
 </div>

和 CSS

.image-wrap{
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 70%;
margin:0 auto;
}


.image-wrap img{
    max-width: 75%;
    max-height: 75%;
}

这就像一个魅力（见下文）。

现在，我希望图像成为显示图像的超链接，因此我将其包装在<a>标签中

 <div class="image-wrap">

   <a href="{{p.image_url}}"><img src="{{p.image_url}}"></a>

 </div>

<img>an 从to <a>like中删除高度/宽度属性

.image-wrap{
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 70%;
margin:0 auto;
}

.image-wrap a{
    max-width: 75%;
    max-height: 75%;
}

.image-wrap a img{
    max-width: 100%;
    max-height: 100%;
}

如您所见，图像现在溢出，即使<a>具有完全相同的大小属性<img>，并且有效。

怎么来的？

标签： htmlcss

Answer 1

.image-wrap a{
    max-width: 75%;
    max-height: 75%;
}

.image-wrap a img{
    max-width: 100%;
    max-height: 100%;
}

如果您还试图影响链接的大小和 img 的大小，则语法错误应该是

.image-wrap, a{
    max-width: 75%;
    max-height: 75%;
}

.image-wrap, a, img{
    max-width: 100%;
    max-height: 100%;
}

如您所见，我在要分组的每个选择器之间添加了一个逗号