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

Question

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

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

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

score 2 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

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

span.yourclass img {
width: 140px;
}

于 2013-09-04T11:24:05.413 回答

score 0 · Accepted Answer

包装你的图像，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;
}

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

img{ width: 140px; }

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

6 回答 6