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

您使用的是错误的CSS选择器。当你改变`

时会更好

aside img{

到

aside > a > img{

Answer 2

您为img设置了余量top & bottom太大，即：20％＆amp; aside img CSS中的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 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

首先，杰克你不应该使用更大的图像来满足你的要求，而是首先通过Adobe Photoshop或其他各种工具等工具使图像适合你的要求然后使用它。

其次，您应该在身体而不是单个组件上给予保证金以使页面保持在中心位置。否则，这将结束将页面保持在中心的目的。对于正文，您必须将css保持为

body{

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

}

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

第三个给你的元素宽度。除元素的CSS为

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%;
}

这里根据我的方便设置身高：500px，但你可以根据你的页面结构自己设置它。

支持的 链接为

aside a{ display: inline-flex; margin-bottom: 4%; }

这里的inline-flex将保持灵活列内的链接，不允许它出去。 margin-bottom将分隔图像。
链接中图片的是

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

如果您使用 除了img ，那么这意味着所有img元素都在旁边。意思是说，即使您在没有放入链接的情况下直接使用图像，也可以在链接下为图像渲染css。如果您确定将相同的CSS呈现给链接内部的图像以及外部链接，那么您可以使用img。它会好起来的。

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

4 个答案: