是否可以将页面上的所有图像调整为特定大小？

Question

我正在创建一个电子邮件传单，我有140px到140px的多个图像，但有些图像原本是300x300或400x400。我不想调整每个图像的大小，因为可能会有很多，传单将是每周更新，所以是否可以使用CSS告诉所有图像（或具有类的图像）调整为140px？

我打算发布一些代码，但这是一个非常模糊的请求，所以没有相关的代码可以显示来帮助我解决问题。

也许如果我<span>...</span>然后给一个班级一个班级，这样可能吗？

Answer 1

如果您的标记用于简报，则可以强制使用style属性以及内联width和height属性的维度，例如

<img src="..." style="width:140px; height:140px" width="140" height="140" />

但是，无论如何，我强烈建议执行某种批量任务以自动调整图像大小（例如使用GruntJS），这样您就可以在存储静态资产的服务器上节省一些宝贵的带宽。 （相反，如果您将图像嵌入到电子邮件中，用户将会欣赏更轻的尺寸）

Answer 2

是的，将课程添加到span，然后：

span.yourclass img {
width: 140px;
}

Answer 3

用div.class包装你的图像，然后写一个css来调整由该div包装的所有图像

<强> MARK-UP ::

 <div class="imageWrapper">
     <img src="/path/to" />
     <img src="/path/to" />
     <img src="/path/to" />
 </div>

<强> CSS ::

.imageWrapper{
     overflow:hidden;
 }

.imageWrapper img{
   width:400px;
   height:400px;
}

Answer 4

我想我可能会理解这一点，但是一些简单的CSS应该可以工作：

css：

img.small {
    width: 140px;
    height: 140px;
}

如果您想在特定元素下执行所有img：

.thumbs img {
    width: 140px;
    height: 140px;
}

html：

<img src="pic.jpg" class="small">

<div class="thumbs">
    <img src="pic.jpg">
    <img src="pic.jpg">
    <img src="pic.jpg">
</div>

或者如果它们是动态生成的，你可以消除css，然后去：

<img src="pic.jpg" width="140" height="140">

Answer 5

您可以为所有图像设置宽度和高度。添加“max”关键字以确保。

img{
   max-width:140px !important;
   max-height:140px !important;
}

Answer 6

如果您只是希望页面上的所有图像都要调整大小，请将以下内容添加到CSS中：

img{ width: 140px; }

这会按比例设置高度/宽度，我假设你的所有图像都是正方形的？ 如果没有，请添加'height：140px'但这会扭曲不是正方形的图像。