Question

I have been using the following css to make my images responsive

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

However it doesn't seem to work when the img is within an <a> tag ie.

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

Why is this and what could be a way around it? Here is the complete code - (it is responsive on the fiddle but not on the site): https://jsfiddle.net/bLchqb9u/

内进行响应

Answer 1

ProgressBar始终适用于父元素的值。默认情况下，100%的宽度不会<a>（它的宽度会与内容一样大）。您必须更改行为，如下所示：

100%

在这里演示：

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

Answer 2

使用width max-width的{{1}}，找到工作的fiddel：{{3}}

Answer 3

max-width中的百分比根据包含块的宽度得到解决。

然后，您的代码可能无效的唯一情况是

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

解决方案是防止含有鸡群取决于内容。确保它有明确的宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

这样，<a>标记将作为容器运行，图像将拉伸到该大小。

Answer 5

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

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

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

在<a>tag?

5 个答案: