如何在 <a></a> （链接图像）之间调整图像大小？答案

【问题标题】：How to resize an image between <a></a> (link image)?如何在 <a></a> （链接图像）之间调整图像大小？
【发布时间】：2016-10-02 04:15:57
【问题描述】：

代码：

<div class="marquee">
   <ul>
      <li>
       <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>

情况：

当我删除 <a> 标签时，这有效：

.marquee ul li img {
    max-height: 80%;
}

问题：

当我添加 <a> 时，我找不到设置图像样式的方法。

1) 不起作用。

.marquee ul li a img {
    max-height: 80%;
}

2) 不起作用。

.marquee ul li a {
    max-height: 80%;
}

3) 不起作用。

.marquee-items {
    max-height: 80%;
}

问题：

我怎样才能使它与<a> 标签一起工作以保持我的图片链接？

编辑：

只是想确保没有误解。我正在使用一个已经定义了宽度的旋转木马。轮播中有许多图像。我只需要定义图像的最大高度，这样它们就不会溢出。通过添加<a></a> 标签使它们成为可点击的图像后，我似乎无法选择它们。

还有：

4) 不起作用。

.marquee ul li a{
    display: inline-block; 
    max-height: 80%;
}

.marquee ul li a img {
    max-height: 100%;
}

5) 不起作用。

.marquee ul li a{
    display: inline-block; 
    max-height: 80%;
}

.marquee ul li a img {
    height: 100%;
}

解决方案：

.marquee ul li a{
    display: inline-block; 
    height: 80%;
}

.marquee ul li a img {
    max-height: 100%;
}

【问题讨论】：

标签： html css image styles size

【解决方案1】：

能够为其设置高度的简单说明，您需要为周围的锚标记指定高度以在锚标记上工作，您需要将显示属性设置为阻止

Why anchor tag does not take height and width of its containing element
看看这个 stackoverflow 问题

a {
    display:inline-block;
    height:1000px;
    
}
a img {

        max-height:700px;
        height:100%;
        width:100%;
}

<a href="#">
    <img src="http://static.adzerk.net/Advertisers/8d3759a4bd66406998dc013b5b948ae6.png">
   </a>

注意这里有没有显示的区别：block

a {
  height: 1000px;
}
a img {
  max-height: 700px;
  height: 100%;
  width: 100%;
}

<a href="#">
  <img src="http://static.adzerk.net/Advertisers/8d3759a4bd66406998dc013b5b948ae6.png">
</a>

【讨论】：

谢谢！最后一个正确的答案:)
@Coder1000 bakowroc 和 Error404 指出相同点的方式略有不同
我知道 :D 但我发现他们的答案缺乏。我在等你写的东西来接受答案。如果我们不坚持 SO 标准，一切都会慢慢开始退化。
@Coder1000 有点苛刻 :P 考虑到 bakowroc 是一个试图做出贡献的新人
我更喜欢在我看到新人时向他们展示什么是好的，这样他们就不会被禁止回答/提问。我知道从 SO 开始有多么困难，所以我更愿意帮助新手，向他们解释这里的心态是什么以及他们的目标是什么。许多禁令可以通过这种方式避免:) 如果我们不向新人解释任何事情，他们有一天会被否决并被禁止，并且可能会放弃 SO。我希望这不是我们想要的社区：D

【解决方案2】：

<a> 标签是一个内联元素。显示为inline-block，这样就可以得到height/width。

.link{
  display: inline-block;
  height: 400px;
  width: 400px;
}

.marquee-itm{
  width: 80%;
}

<div class="marquee">
   <ul>
      <li>
       <a class="link" href="https://developer.apple.com/swift/"><img class="marquee-itm" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" /></a>
      </li>
   </ul>
</div>

【讨论】：

这不起作用。我正在尝试设置我的 img 样式（因为它太大了，所以只出现了一半）。不是我的。
@Coder1000 但是将 display: inline-block 添加到 a 标签。它将允许 a 标签具有高度/宽度。另外，为 a 标签设置一个高度/宽度，因为当您使用百分比时，它会占用其容器的宽度/高度（如果它具有高度/宽度）。
@Error404 你认为我刚刚做了什么？这确实允许设置标签的样式，而不是 img.
@Coder1000 还为您的 a 标签添加所需的高度/宽度。如果您使用百分比（正如我在上面的评论中所说），它将捕获具有高度/宽度的第一个父级的百分比。
@Error404 这就是为什么我给你一个赞成票：P 好答案！但 Sachin Divakar 的表现非常出色：D

【解决方案3】：

您不能添加 perc。什么都没有的宽度/高度值（未设置）。 img 位于 a 标签内，因此您还必须为其添加宽度/高度值。

【讨论】：