可点击的链接对于图片来说太大了

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.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>

Answer 2

首先，Jack，您不应该根据您的要求使用更大的图像，而是首先通过 Adob​​e Photoshop 或其他各种可用工具等工具使图像符合您的要求，然后再使用它。

其次，您应该在正文而不是单个组件处留出边距，以使页面保持在中心。否则，这将结束将页面保持在中心的目的。 对于 body 你必须保持 css as

body{

                margin: 0;
                margin-left:2%;
                margin-right: 2%; 

}

这里我保留了 margin-left:2%，否则最好的做法是给页面所有元素所在的主容器提供宽度并设置 margin-left:auto;和 margin-right:auto;设置页边距 0 最初使页面保持在图像中显示的顶部。

第三个给你的side元素宽度。 aside 元素的 css 为 as

aside.left{
  background-color: #777613;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 500px;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    width: 15%;
} 

这里我根据我的方便设置了 height:500px 但是你可以根据你的页面结构设置你自己的。

旁边的链接的css是as

aside a{

    display: inline-flex;
    margin-bottom: 4%;
}

这里的 inline-flex 会将链接保持在 flex 列中，并且不允许它超出。 margin-bottom 将分离图像。

链接中的图片的css是

aside a img{
  border: 1px solid black;
    display: block;
    width: 96%;
}

这里如果你使用 aside img 那么这意味着所有的 img 元素都在里面。意思是说，即使您直接在旁边使用图像而不放入链接，那么它也会为链接下的图像渲染 css。如果您确定将相同的 css 渲染到链接内部和外部链接的图像，那么您可以使用 img。它会正常播放的。

Answer 3

    <style>
    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: 100%;
    }
    aside img{
      display:block;
     /* margin:20% 0 10% 0; */
      height:100%;
      width:100%;
      border:1px solid black;
    }

    aside.left{
      width: 50%;
    }
    section.right{
      width:40%;
    }
    aside > a{
      height:33.3%;
      margin:0px;
    }
    </style>

这可能会有所帮助。抱歉，有多个类名。

Answer 4

您使用了错误的 CSS 选择器。 改了就更好了`

aside img{  

到

aside > a > img{