Question

CODE：

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

SITUTATION：

当我删除<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%;
}

SOLUTION：

.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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意这里有无差异的区别：阻止

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您无法添加perc。宽度/高度值没有（未设置）。 img位于标签内部，因此您还必须为其添加宽度/高度值。

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

3 个答案: