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

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

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

但是,当 img 在 &lt;a&gt; 标签内时,它似乎不起作用。

<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% 始终适用于父元素的值。默认情况下,&lt;a&gt; 没有 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】:

    您应该将&lt;a&gt; 元素设为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; 

    这样&lt;a&gt; 标记将充当容器,并且图像将拉伸到该大小。

    【讨论】:

      【解决方案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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2018-10-10
        • 2023-03-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-04-09
        • 2012-10-25
        相关资源
        最近更新 更多