在 <a> 标记内使 <img> 响应？答案

【问题标题】：Making <img> responsive when within <a>tag?在 <a> 标记内使 <img> 响应？
【发布时间】：2015-12-29 15:24:36
【问题描述】：

我一直在使用以下 css 来使我的图像具有响应性

img{  
    max-width: 100%; 
    height: auto;    
}

但是，当 img 在 <a> 标签内时，它似乎不起作用。

<a href="#"><img class="fbicon" src="images/fbicon.png" alt="main"></a>

为什么会这样？有什么办法可以解决它？这是完整的代码 - （它在小提琴上响应但不在网站上）： https://jsfiddle.net/bLchqb9u/

【问题讨论】：

你为什么用max-width: 100%而不是width: 100%？
@CodeiSir 为了避免放大小图像，我猜。
我无法重现该问题。究竟是什么不起作用？
您的代码对我来说非常有用：jsfiddle.net/c9sejcym
jsfiddle.net/bLchqb9u完整代码

标签： css image responsive-design

【解决方案1】：

使用 width insted of max-width ，找到工作的fiddel：https://jsfiddle.net/5n4rarrL/

【讨论】：

【解决方案2】：

100% 始终适用于父元素的值。默认情况下，<a> 没有 100% 宽度（它的宽度与它的内容一样大）。你必须改变行为，像这样：

<a href="#" style="width:100%"><img class="fbicon" src="images/fbicon.png" alt="main"></a>

在这里演示：

<div style="width: 300px">
  <a href="#" style="max-width:100%">
    <img style="width:100%;" src="https://upload.wikimedia.org/wikipedia/commons/1/17/Gustave_Caillebotte_-_Paris_Street%3B_Rainy_Day_-_Google_Art_Project.jpg" alt="main">
  </a>
</div>

【讨论】：

不是父元素。它是包含块。除非某些代码阻止了 a 元素，否则它不会是包含块。而max-width 不适用于a 等不可替换的内联元素，因此您的解决方案什么也不做。

【解决方案3】：

max-width 中的百分比相对于包含块的宽度进行解析。

那么，您的代码可能无法正常工作的唯一情况是

如果包含块的宽度取决于该元素的宽度，则生成的布局在 CSS 2.1 中未定义。

只有在使用shrink-to-fit algorithm 计算包含块的宽度时才会发生这种情况。例如，浮动、绝对定位或带有width: auto 的内联块。

div {
  float: left; /* Shrink-to-fit width, depends on the content */
}
img {  
  max-width: 100%; /* Depends on the containing block */
  height: auto;
}

<div>
  <a href="#">
    <img src="http://lorempixel.com/1000/200/" />
  </a>
</div>

解决方案是防止包含的羊群依赖于内容。确保它具有明确的宽度。

div {
  float: left;
  width: 100%; /* No longer depends on the content */
}
img {  
  max-width: 100%; /* Depends on the containing block */
  height: auto;
}

<div>
  <a href="#">
    <img src="http://lorempixel.com/1000/200/">
  </a>
</div>

【讨论】：

事实上，我包含的 img 元素是绝对定位的（因为我需要它）ie。 .fbicon{ position: absolute; top: 5px; left: 5px; transform: scale(0.5, 0.5); } .fbicon 本身在一个相对定位的标题中
jsfiddle.net/bLchqb9u 它在 jfiddle 中有效，但在我的网站上似乎无效

【解决方案4】：

您应该将<a> 元素设为block 容器。

像这样：

a {
  display: block;
}
img{  
    width: 100%; 
    height: auto;    
}

&lt;a href="#"&gt;&lt;img class="fbicon" src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2_1x.png" alt="main"&gt;&lt;/a&gt;

这样<a> 标记将充当容器，并且图像将拉伸到该大小。

【讨论】：

【解决方案5】：

尝试了显示和宽度建议，但图像仍然由于某种原因没有响应（而另一个 img 是），即使它在 jfiddle 上工作。终于，新的srcset来救场了，

<img class="fbicon"  src="images/fbiconlarge.png"
     srcset="images/fbiconlarge.png 1380w,
             images/fbiconlarge.png 640w,
             images/fbiconlarge.png 320w"

但是必须说，现在它有点过于敏感了 - 在最小的屏幕上太小了。将发布一个单独的问题。谢谢@Oriol、Hasan、Hans、CodeiSir

【讨论】：