整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
*CSS基础-06-元素大小（设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height）**
在Web前端开发中，对元素大小的精确控制是构建美观且布局合理的网页界面的关键。CSS提供了丰富的属性来帮助我们实现这一目标，包括设置元素的宽高（`height`/`width`）、定义最大与最小尺寸（`max-height`/`max-width`和`min-height`/`min-width`），以及调整文本行间距（`line-height`）。本文将深入探讨这些属性的用法、应用场景及示例代码，助您掌握元素大小调整的核心技巧。
**一、设置元素尺寸：height与width**
**1.1 定义元素高度（height）**
**定义方式：**
```css
element {
height: value;
}
```
其中，`element`代表目标元素的选择器，`value`可以是以下几种类型：
- **绝对单位**：如像素（`px`）、厘米（`cm`）、毫米（`mm`）、英寸（`in`）、点（`pt`）等。
- **相对单位**：如百分比（`%`）、视口宽度（`vw`）、视口高度（`vh`）、字体大小（`em`）等。
- **关键字**：如`auto`（默认值，由内容决定高度）、`initial`（恢复初始值）、`inherit`（继承父元素的值）。
**示例代码：**
```html
<div class="box">
<p>这是一个高度为200px的盒子。</p>
</div>
<style>
.box {
background-color: #f8f9fa;
height: 200px; /* 设置固定高度 */
width: 300px; /* 设置固定宽度，便于观察效果 */
}
</style>
```
**1.2 定义元素宽度（width）**
**定义方式：**
```css
element {
width: value;
}
```
`width`属性的值同样支持绝对单位、相对单位及关键字，其使用方法和`height`相同。
**示例代码：**
```html
<div class="content">
<p>这是一个宽度为80%的自适应容器。</p>
</div>
<style>
.content {
background-color: #f8f9fa;
width: 80%; /* 设置宽度为父元素的80% */
margin: 0 auto; /* 居中显示 */
}
</style>
```
**二、设定元素最大/最小尺寸：max-height/max-width与min-height/min-width**
**2.1 最大高度/宽度（max-height/max-width）**
**定义方式：**
```css
element {
max-height: value;
max-width: value;
}
```
这两个属性用于限制元素的最大尺寸，当元素的实际尺寸超过设定值时，会自动调整到指定的最大值。值的类型与`height`和`width`相同。
**示例代码：**
```html
<div class="image-container">
<img src="large-image.jpg" alt="Large Image">
</div>
<style>
.image-container {
max-width: 100%; /* 图片最大宽度不超过父元素宽度 */
max-height: 500px; /* 图片最大高度不超过500px */
overflow: hidden; /* 隐藏超出部分 */
}
</style>
```
**2.2 最小高度/宽度（min-height/min-width）**
**定义方式：**
```css
element {
min-height: value;
min-width: value;
}
```
`min-height`和`min-width`用于确保元素的最小尺寸，当元素的实际尺寸小于设定值时，会强制扩展到指定的最小值。值的类型与`height`和`width`相同。
**示例代码：**
```html
<div class="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<!-- 更多链接 -->
</ul>
</div>
<style>
.sidebar {
background-color: #f8f9fa;
min-width: 200px; /* 侧边栏最小宽度为200px */
}
</style>
```
**三、设置行间距：line-height**
**3.1 定义行间距（line-height）**
**定义方式：**
```css
element {
line-height: value;
}
```
`line-height`属性用于设置元素内文本行之间的垂直间距。值的类型包括：
- **数值**：如`1.5`、`2`等，表示相对于当前字体大小的倍数。
- **绝对单位**：如像素（`px`）、厘米（`cm`）等。
- **百分比**：相对于元素本身的字体大小。
- **关键字**：如`normal`（默认值，浏览器默认行间距）、`initial`、`inherit`。
**示例代码：**
```html
<p class="loose-text">这是一段行间距为1.5倍的文本。</p>
<style>
.loose-text {
font-size: 16px;
line-height: 1.5; /* 设置行间距为字体大小的1.5倍 */
}
</style>
```
**四、实战应用与注意事项**
**4.1 响应式设计**
结合`max-height`/`max-width`、`min-height`/`min-width`与媒体查询（`@media`），可以轻松实现响应式布局，确保元素在不同屏幕尺寸下保持合适的大小。
**示例代码：**
```css
@media (max-width: 768px) {
.content {
width: 100%; /* 小于768px时，宽度占满屏幕 */
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.content {
width: 75%; /* 768px至1200px之间，宽度为75% */
}
}
@media (min-width: 1200px) {
.content {
width: 50%; /* 大于1200px时，宽度为50% */
}
}
```
**4.2 注意事项**
- **`height`与`width`设置为`auto`时，元素的尺寸通常由其内容决定。对于块级元素，宽度默认为`auto`，高度则受内部内容影响；对于内联元素，宽度和高度均受内容影响。**
- **使用百分比单位时，`height`的百分比基于包含块的高度，而`width`的百分比基于包含块的宽度。**
- **在设置`min-height`时，确保包含块（父元素）具有足够的高度或自身元素具有足够的内容，否则可能无法达到预期效果。**
- **使用`line-height`时，注意与其他文本相关的属性（如`font-size`、`vertical-align`等）的配合，以保持良好的排版效果。**
通过熟练掌握上述CSS属性，您将能精准地控制网页中元素的大小，实现复杂多样的布局效果。不断实践并结合实际项目需求，您的前端开发技能将更上一层楼。
在本文中，了解如何使 HTML 图像更适合具有响应式尺寸和现代格式的用户，而不会使您作为开发人员的生活更加困难。
假设我们只有一个从我的域加载图像的基本网站。代码可能如下所示：
<!DOCTYPE html><html><正文> <img src="https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png" alt="命令行终端和旧电脑，背景中有靛蓝色笔触。" ></正文></html>具有单个图像标记且具有 asrc和alt属性的 HTML 文档在技术上可以正常工作。它按预期提供图像，但该图像存在一些问题。
在大屏幕上，这张图片会很好，但对于使用小屏幕设备的用户来说，1200 像素宽的图片意味着他们必须下载比他们需要的更大的图片。下载可能需要更长的时间，并且可能会花费他们的数据计划费用。
这第一步很关键，但我认为大多数人都熟悉，所以我不会太深入。
Squoosh是一个非常棒的应用程序，可以手动执行此操作。
如果图像在您的 GitHub 存储库中，您也可以使用imgbot自动完成。
图像可以有一个srcset属性，允许我们根据某些设备特征（例如设备宽度）为图像定义多个来源。
我们可以srcset像这样向我们的图像标签添加一个属性：
<!DOCTYPE html><html><正文> <img srcset=" https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080x540.png 1080w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480x240.png 480w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200x100.png 200w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768x384.png 768w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png 1200w" src="https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png" alt="命令行终端和旧电脑，背景中有靛蓝色笔触。" ></正文></html>我链接到五个不同尺寸的五个不同图像并定义它们相应的视口宽度。如果我们在浏览器中打开我们的图像，视觉上并没有真正改变。但在引擎盖下，有一些改进。
当我们在不同的屏幕上重新加载时，打开开发工具网络选项卡。
在大屏幕上，我们将看到像以前一样下载了全尺寸图像（Command-Line-Blog-Cover.png）。没什么特别的。
但是，如果我们从 200 像素或更窄的屏幕开始，我们会加载 200x100 像素的图像（Command-Line-Blog-Cover-200x100.png）。
对于用户而言，该大小将变得更小更快。
仅发送较小图像的一个问题是：如果用户最初在小屏幕上加载页面，然后将浏览器调整为更大的尺寸会发生什么？在大屏幕上拉伸小图像会使它像素化。
属性不会发生这种情况srcset（假设我们提供了正确的图像），因为当从最小屏幕调整到最大屏幕时，会根据它们的断点下载新图像。
方便的是，从大屏幕到小屏幕的另一个方向不会发生相同的行为，因为毕竟，您可以在较小的屏幕上提供大图像，并且可以缩小而不损失质量。随着屏幕变小，您不想下载额外的图像，因为那样会使用更多数据而没有任何额外的好处。
这是一种非常方便的方法，可以通过节省带宽来改善用户体验，并通过以正确的尺寸提供正确的图像来提高性能，但仍有改进的空间。
我们正在加载的图像是 PNG，但现代浏览器支持新的图像格式，例如WebP或AVIF。这些格式提供了更高的压缩率而没有明显的数据丢失，这意味着我们可以以更小的文件大小有效地提供相同的图像。
再一次，浏览器让我们覆盖了HTML<picture>元素。
类似于srcset属性，图片元素允许我们根据设备特性定义不同的图像源来服务。
所以我们可以做一些事情，比如根据设备宽度或不同的像素密度提供不同的图像。但是将图片元素与属性区分开来的一件事srcset是我们可以针对不同的 mime 类型。
如果浏览器支持，让我们在示例中添加一个包含 AVIF 和 WebP 格式的图片元素。当然，我们还希望继续提供响应式版本。
<!DOCTYPE html><html><正文> <图片> <来源 类型="图像/avif" srcset=" https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.avif 1200w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080x540.avif 1080w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768x384.avif 768w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480x240.avif 480w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200x100.avif 200w" > <来源 类型="图像/webp" srcset=" https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.webp 1200w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080x540.webp 1080w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768x384.webp 768w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480x240.webp 480w， https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200x100.webp 200w" > <img src="https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png" alt="命令行终端和旧电脑，背景中有靛蓝色笔触。" > </图片></正文></html>（我们不需要标签srcset，<img>因为它可以作为不支持的旧浏览器的后备srcset。）
好的，我们有一个图像，它只会以最小的尺寸为用户提供最现代的图像格式。
上面的代码是不是……很漂亮？
真的让您想向您的网站添加新图像，对吗？
正确的！？！？
不！我们做了什么！？！？
（你好黑暗，我的老朋友……）
好的，既然我们已经解决了这个问题，很明显，上面的解决方案并不是很好。
对于我们想要定位的每种格式和设备宽度，我们需要不同版本的图像。在上面的示例中，这是同一图像的11 个版本（5 个 AVIF、5 个 WebP、1 个 PNG）。
尽管浏览器为我们提供了提供更好的图像和提供更好的用户体验的功能，但这是以开发人员体验为代价的。
（谁愿意付钱？不是我！）
我们可以在上传图像以生成不同的格式和大小时自动执行该过程，然后将这些详细信息存储在数据库中。有一些工具可以提供帮助，例如sharp，但这仍然需要大量工作。我很少看到人们这样做，因为要么工作量太大，要么他们根本不考虑。
我的建议是外包。
今天我将使用 Akamai 图像和视频管理器，因为它是我最熟悉的服务，尽管还有其他人做同样的工作。主要目标是在不让开发人员发疯的情况下为用户提供最佳图像。
我已经设置了一个图像管理器的实例。
要从我的域中添加图像，我只需将“图像”前缀添加到常规图像 URL。所以“austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png”变成了“images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png”。
没什么太有趣的。
但是让我们回到我们的代码，去掉<picture>元素，替换旧的 URL，看看我们能做什么：
<!DOCTYPE html><html><正文> <img srcset=" https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-1080x540.png 1080w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-480x240.png 480w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-200x100.png 200w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover-768x384.png 768w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png 1200w" data-fr-src="https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png" alt="命令行终端和旧电脑，背景中有靛蓝色笔触。" ></正文></html><picture>与将元素与 AVIF 和 WebP一起使用相比，我认为没有人会抱怨这一点。这肯定是少了一些工作，但是结果呢？
如果我重新加载页面，我们可以看到相同的图像出现（“Command-Line-Blog-Cover.png”），但如果我们查看响应标题，事情会变得有点有趣。
尽管请求是针对 PNG 图像的，但响应实际上是发送 WebP 数据。这导致图像尺寸更小，这意味着只需打开图像管理器，我就已经为我的用户节省了带宽，而无需做任何事情。
我们已经改进了格式，但是响应式图像大小呢？
我仍然将srcset属性设置为在小屏幕上提供小图像，在大屏幕上提供大图像。但是这个系统仍然依赖于提供五种不同分辨率的五种不同的图像。
还是很痛的。
仅提供上传功能就可以成为一项重要功能，更不用说调整大小和存储不同的图像了。对我们来说幸运的是，因为我们正在使用图像管理器，我们实际上可以使这个过程变得更简单。
我实际上将多次引用同一个图像，而不是使用五个不同大小的图像。但我将附加一个查询字符串参数，该参数明确定义我想要定位的大小。
<!DOCTYPE html><html><正文> <img srcset=" https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png?imwidth=1080 1080w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png?imwidth=480 480w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png?imwidth=200 200w, https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png?imwidth=768 768w， https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png 1200w" src="https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/Command-Line-Blog-Cover.png" alt="命令行终端和旧电脑，背景中有靛蓝色笔触。" ></正文></html>请注意，现在每个图像 URL 都转到相同的“Command-Line-Blog-Cover.png”文件，但其中一些imwidth附加了一个额外的查询字符串。
如果我像以前一样在这个小屏幕上重新加载并调整到更大的屏幕，我们会看到类似的行为。不同尺寸的不同图像被加载到它们各自的屏幕尺寸中。
但是这里有一个很大的区别：我们不必创建、上传和管理五张不同大小的不同图像，我们只需要担心一张图像。通过 queer 字符串参数生成不同的大小。
与其他情况相比，它的工作量要少得多，尤其是在您使用基于组件的框架时。
但我们可以做的工作更少！
我们可以回到只使用图像 URL，并让图像管理器为我们选择合适的尺寸。
为了展示它，我喜欢在新标签而不是网站中打开图像。将鼠标悬停在浏览器选项卡上会显示图像的尺寸，1200x600px。
如果我打开我的开发工具，我可以转到Elements 选项卡并模拟不同的设备，例如 iPhone SE：
现在，当我重新加载时会发生一些有趣的事情。
尽管 URL 完全相同，但我可以看到图像大约是一半大小。将鼠标悬停在标签上可确认尺寸为 640x320 像素。
最好的部分是什么？确定要提供哪个图像的所有工作都是在我（开发人员）无需做任何事情的情况下进行的。每次请求都会自动发送设备特征，并且 Image Manager 会以更小的图像进行响应。
老实说，我实际上无法解释它是如何工作的。这很神奇，而且超级酷，让我的生活更轻松，让我的用户生活得更好。
（如果你真的很好奇它是如何工作的，请在 Twitter 上联系我，我会为你找出答案。）
如果您是 Akamai 客户并且您没有使用此功能，您应该立即使用它！
我还想为非 Akamai 客户的人们分享一些替代方案。有两个开源项目看起来提供了类似的功能，尽管我没有亲自使用过它们。
其中之一称为imgproxy。另一个称为Thumbor。只要您习惯使用 Docker，它们看起来都很容易安装。
我真的很喜欢Linode的廉价、强大的 VP。
我是 DIY 方法的忠实拥护者，但我认为它并非没有缺点（我的意思是，除了设置和维护之外）。我不确定这些服务在哪里托管图像。如果它们与安装托管在同一台服务器上，则可能存在两个问题。
也就是说，我认为它仍然值得一试。
如果你确实让它工作并且你喜欢它，请回来告诉我它是怎么回事。什么进展顺利，什么没用，什么很棒，和/或缺少什么？
好吧，这就是我今天为你准备的全部内容。我们介绍了处理图像的不同选项及其优缺点。我们从<img>一个src属性开始，添加一个srcset属性，然后<picture>使用不同的<source>标签，最终把它全部烧掉，回到只是属性，但合并了图像管理器<img>。src
换句话说，这是一个非常迂回的旅程：
<! – 坏 – ><img src="https://austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png" alt="命令行终端和旧电脑，背景中有靛蓝色笔触。">对此：
<! – 好 – ><img data-fr-src="https://images.austingil.com/wp-content/uploads/Command-Line-Blog-Cover.png" alt="命令行终端和旧电脑，背景中有靛蓝色笔触。">多么虎头蛇尾。
可能本来可以节省时间，然后说“改善图像的第一步：使用图像管理器”，但其中的乐趣在哪里？我也喜欢挖掘原因。
我们甚至没有涉及诸如延迟加载、解码或获取优先级之类的内容，但这些内容更具上下文和细微差别，而上面的建议几乎是全面的。
无论如何，我希望您喜欢它，并且希望您实施其中一些解决方案，因为发送具有现代格式的较小图像是使互联网成为更快、更环保的地方的好方法。
谈论图片处理软件时，我们常常会提到行业领袖和强大的工具，但选择合适的软件不仅仅是使用功能，更是关于学习和成长。Adobe Photoshop、GIMP、Krita等软件不仅提供强大的编辑功能，还能成为您探索和提升技能的平台。无论您是刚入门的新手还是经验丰富的专业人士，理解如何有效地使用这些工具至关重要。通过学习它们的基础和高级功能，您将能够更好地应对各种挑战，创造出令人印象深刻的作品。让我们一起探索和学习，用这些工具来提升我们的创造力和技能吧！看到粉丝当众求助，让写一个关于图片如何修改尺寸的文章，本着授人以鱼不如授人以渔的原则，列举出并简单写了一下图片调整尺寸的方法。
在这个视觉为王的时代，拥有一款得心应手的图片处理软件至关重要。无论您是摄影爱好者、设计师，还是仅仅想要美化日常照片，以下这 10 款软件都能满足您的需求。
1. Adobe Photoshop
官网下载：https://www.adobe.com/cn/
2. Adobe Illustrator
官网下载：https://www.adobe.com/cn/products/illustrator.html
3. GIMP
官网下载：https://www.gimp.org/
4. 美图秀秀
官网下载：https://pc.meitu.com/download
5. 光影魔术手
官网下载：https://www.neoimaging.cn/
8. 改图鸭
官网下载：https://www.gaituya.com/
9. 图片编辑助手
官网下载：https://www.xunjiepdf.com/tupian
10. Fotor
官网下载：http://static.fotor.com.s3-website-us-east-1.amazonaws.com/cn/index.html
以下是使用一些常见软件调整图片尺寸的步骤：
**方法一：使用嗨格式抠图大师** 1. 下载并安装嗨格式抠图大师，打开软件后点击对应抠图功能。 2. 在弹出的窗口中，点击选择需要调整尺寸的图片。 3. 图片添加完成后，点击右边“改尺寸”选择需要的尺寸即可调整图片大小。 小贴士：嗨格式抠图大师还支持批量处理图片，可以一次性调整多张图片大小，大大提高工作效率。
**方法二：使用 Photoshop** 1. 打开 Photoshop，导入需要调整尺寸的图片。 2. 在菜单栏中选择“图像”，然后选择“图像大小”。 3. 在弹出的对话框中，可以修改图片的宽度和高度。注意，需确保“约束比例”是勾选状态，以保持图片的长宽比不变，避免图片变形。若想要自定义长宽比，也可以取消勾选“约束比例”。 4. 修改完成后，点击“确定”按钮即可保存调整大小后的图片。
**方法三：使用画图工具（Windows 系统自带）** 1. 右击图片，选择“打开方式”中的“画图”。 2. 在画图工具的菜单栏中，找到“重新调整大小”选项，点击它。 3. 在弹出的对话框中，选择依据百分比或像素来调整图片大小。若选择像素，则可手动输入新的水平和垂直像素值。勾选“保持纵横比”可使图片在调整大小时保持比例不变，防止图片变形。 4. 点击“确定”后，再点击“文件”菜单，选择“保存”，将调整后的图片保存到本地。
**方法四：使用美图秀秀** 1. 打开美图秀秀，导入需要调整尺寸的照片。 2. 在菜单栏中选择“裁剪”功能。 3. 在弹出的对话框中选择“自定义裁剪”。 4. 输入需要调整的尺寸大小（如 285*385），并点击“确定”按钮。 5. 等待调整完成后，保存照片即可。
**方法五：使用在线图片处理工具改图宝** 1. 打开改图宝的官网（https://www.gaitubao.com/ ）。 2. 点击“选择图片”或直接拖放需要调整尺寸的图片到指定区域。 3. 在下方的“目标图像素”处输入想要的图片尺寸（宽度×高度）。 4. 系统会自动调整图片尺寸，调整完成后，可点击“下载”按钮保存图片。 需注意，不同软件的操作界面和具体选项可能会有所差异，但基本思路都是找到调整图片尺寸的相关功能，并输入期望的尺寸数值或通过其他方式进行设置。此外，在调整图片尺寸时，为了保持图片的质量和清晰度，尽量避免过度拉伸或压缩图片。如果需要处理的图片数量较多，可以优先考虑支持批量处理的软件，以提高工作效率。
网盘链接：夸克网盘分享
提取码：pdUF
以上是对每款软件如何调整图片尺寸大小的简要介绍。具体操作可能会因软件版本或用户界面的不同而有所差异，建议在使用时参考软件的官方文档或在线帮助以获取最准确的操作方法。好了，今天就聊到这儿，如果大家在生活中需要用什么软件或者使用方法，欢迎留言。
*请认真填写需求信息，我们会在24小时内与您取得联系。
