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

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

我想保持图像的纵横比，所以我使用百分比 %。但是每次我使用它时，link 仍然保持其巨大的尺寸，因此在 aside 容器内占据了一个巨大的 space。当我尝试缩小 link 本身时，图像再次缩小并且问题仍然存在。这是我的代码：

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 过大，即：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 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>

这可能会有所帮助。抱歉有多个 class 个名字。

Answer 4

首先，Jack，你不应该使用比你的要求大的图像，而是先使用 Adobe Photoshop 等工具或其他可用的工具制作符合你要求的图像，然后再使用它。

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

body{

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

}

这里我保留了 margin-left:2%，否则最好的做法是为页面所有元素所在的主容器指定宽度，并设置 margin-left:auto；和 margin-right:auto；设置 margin 0 最初使页面保持在顶部，如图所示。

第三，为你的 aside 元素指定宽度。 css for aside 元素为

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 for link of aside as

aside a{

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

此处 inline-flex 将 link 保留在 flex 列内，不允许它外出。 margin-bottom 将分隔图像。

css 对于 在 link 中的图像是

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

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

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

Clickable link is too large for image

html

css

image

hyperlink

image-resizing