Question

所以我有一系列图像，我想让每个图像都有不同的尺寸，它们位于一个容器中，使用浏览器调整它们的大小

.contentwrapper {
display: block;
position: relative;
margin:0 auto;
width:90vw;
max-width: 100%;
max-height: 100%;
margin-top: 150px;
}

img {
max-width: 75%;
max-height: 75%;
height: auto;
position: relative;
}

如何在不影响其他图像大小的情况下，使每张图像的大小不同？例如第一个图像最大宽度：75％; 最大高度：75％;第二个最大宽度：55％; 最大高度：55％;等

    <div class="contentwrapper">
    <img 
    src="img/1.%20Generation%20anxiety%20front%20+%20back%20copy2.png">

    <img style="float: right" 
    src="img/2.%20GenerationAnxiety%20page%202,2.png">
    </div>

Answer 1

为什么你不能只为每个图像赋予它自己的类名并单独定义它们的高度和宽度？

Answer 2

CSS Flexbox可以解决问题。请查看此Gallary Grid链接。我希望你能找到同样的东西。

Answer 3

CSS允许您将样式分配到：

标记
标签链
标签集合
按标签属性
按标签编号
按标签类
按标签ID
内联
所有上述内容均为“！important”

如果为一个项目多次分配了相同的属性，则其中一个具有最高优先级，而最后一个在css列表中。在这种情况下，结尾为“！important”的属性具有最高优先级。内联css规则具有第一优先级，然后是id，然后是类等等......

如果你想使用公式，你应该考虑使用带有js函数的css规则。

我试图在这里用一个简单的例子反映逻辑：https://codepen.io/anon/pen/PaWNpj

这里的第二个例子：

jQuery("img").each(function(i) {
  var size = 75 - 20 * i;
  if (size < 10) {
    size = 10;
  }
  size = size + "%";
  $(this)
    .css("max-width", size)
    .css("max-height", size);
});

但你可以使用css规则：

img:nth-child(1) {
    max-width: 75%;
    max-height: 75%;
}

img:nth-child(2) {
    max-width: 55%;
    max-height: 55%;
}

img:nth-child(3) {
    max-width: 35%;
    max-height: 35%;
}

img:nth-child(4) {
    max-width: 15%;
    max-height: 15%;
}

如何更改每张图片的大小？

3 个答案: