html - 可点击的链接对于图像来说太大

Question

我已经到处找了好几天了，似乎无法解决重新缩放图像(仅使用 css)的问题，这些图像被夸大了(这是一项作业)。图像应该垂直堆叠在左侧栏中，右侧是文本正文，如下所示:

这是 html(无法更改):

    <aside class = "left">
        <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>

        <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>


        <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
    </aside>
    <section class = "right">...

我想保持图像的纵横比，所以我使用百分比 %。但是每次我使用它时，链接仍然保持其巨大的尺寸，从而在 aside 容器内占用巨大的空间。当我尝试缩小链接本身时，图像再次缩小并且问题仍然存在。这是我的代码:

aside.left{
  background-color: #777613;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 2% 2% 2%;
  float: left;
  margin-right: 0.5%;
  height: 180vh;
}
aside img{
  display:block;
  margin:20% 0 10% 0;
  height:20%;
  width:20%;
  border:1px solid black;
}

我做错了什么？提前致谢!

Answer 1

您为 img 设置的边距 top & bottom 太大，即:aside img CSS 中的 20% 和 10%。我把它减少到0。根据你的要求调整它

aside.left{
  background-color: #777613;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 2% 2% 2%;
  float: left;
  margin-right: 0.5%;
  height: 180vh;
}
aside img{
  display:block;
  margin:0;
  height:20%;
  width:20%;
  border:1px solid black;
}

<aside class = "left">
   <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/></a>
   <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>
   <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
</aside>