Question

确定。因此，我尝试将此CSSgram添加到我网页中的所有图片中。

这用于为图像添加类似过滤器的Instagram。图片应该用<figure class-"aden"> </figure>包裹，以便添加效果。

所以我试了一下，但大部分图像似乎都破裂或拉伸而且没有整齐。之前 - Fiddle和之后Fiddle.

那么有没有其他方法可以应用此效果而无需包含<figure>标签？

Answer 1

也许删除第一张图片上的height="400"？

此外，<figure>标记是一个块元素，而不是内联的<img>。因此，您必须将display: inline-block;属性放在figure元素上才能获得正确的设置。

Answer 2

请勿尝试在img标记上应用图像的宽度和高度。用CSS代替它：

＆＃13;

$(function() {
	$("img").wrap("<figure class='_1977'></figure>");
});

＆＃13;

figure {
  width: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css" rel="stylesheet"/>
<img src="http://i.imgur.com/IMiabf0.jpg">

<img src="http://static.tumblr.com/lxn1yld/fG0o394ga/135.gif" >

＆＃13;

Answer 3

只需将所需的类应用于img标记：

<img src="http://i.imgur.com/IMiabf0.jpg" class="_1977">

这里是jsfiddle：

https://jsfiddle.net/v356t2yz/27/

使用javascript在网页中使用<figure>包装所有图像

3 个答案: