如何在 <a></a> 之间调整图像大小（link 图像）？

Question

代码：

<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> 标签使它们成为可点击的图像后，我似乎无法 select 它们。

还有：

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

Answer 1

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

Answer 2

您无法添加 perc。 width/height 无值（未设置）。 img 位于 a 标签内，因此您还必须向其添加一个 width/height 值。

Answer 3

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

Why anchor tag does not take height and width of its containing element
Check out this Whosebug question

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>

如何在 <a></a> 之间调整图像大小（link 图像）？

How to resize an image between <a></a> (link image)?

html

css

size

styles

image