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

【问题标题】：Is it possible to resize all images on a page to a specific size?是否可以将页面上的所有图像调整为特定大小？
【发布时间】：2013-09-07 21:05:28
【问题描述】：

我正在创建一个电子邮件传单，我有多个图像，我想要 140 x 140 像素，但有些图像最初是 300x300 或 400x400。我不想调整每张图片的大小，因为可能会有很多，而且传单将每周更新一次，所以是否可以使用 CSS 告诉所有图片（或有类的图片）调整为 140 像素？

我打算发布一些代码，但这是一个相当模糊的请求，因此我无法显示相关代码来帮助我的问题。

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

【问题讨论】：

【解决方案1】：

如果您的标记是针对时事通讯的，您可以强制使用 style 属性和内联 width 和 height 属性的维度，例如

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

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

【讨论】：

【解决方案2】：

用div.class 包裹你的图片，然后编写一个css 来调整所有被该div 包裹的图片的大小

标记::

 <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;
}

【讨论】：

【解决方案3】：

如果您只想调整页面上的所有图片大小，请将以下内容添加到您的 CSS 中：

img{ width: 140px; }

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我想我可能理解这一点，但一些简单的 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">

【讨论】：

【解决方案6】：

是的，将类添加到 span 然后：

span.yourclass img {
width: 140px;
}

【讨论】：