图像边框采用 div 的大小

当我们需要在网页中展示一张图片时，往往需要给图片添加一个边框来增加其可读性和美观度。那么该如何让边框大小和图片一致呢？这里介绍一种方法：使用 div 来包裹图片，并使其边框大小与图片一致。

实现步骤

1.首先，在 HTML 文件中创建一个 div 容器，并将图片作为其中的一个子元素。

<div class="image-container">
  <img src="example.jpg">
</div>

2.使用 CSS 给图片和容器分别添加样式。其中，使用 box-sizing: border-box 可以让边框大小包括在容器的大小内，避免了手动计算容器大小与边框大小的复杂度。

.image-container {
  display: inline-block;
  box-sizing: border-box;
  border: 2px solid #ccc;
  padding: 10px;
}

.image-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

3.调整样式中的边框大小和 padding 大小，使其与图片大小一致。

示例代码

<div class="image-container">
  <img src="example.jpg">
</div>

.image-container {
  display: inline-block;
  box-sizing: border-box;
  border: 2px solid #ccc;
  padding: 10px;
}

.image-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

总结

使用 div 包裹图片并设定边框大小可以很方便地让图片的边框与其大小一致，同时避免了手动计算边框大小和容器大小的繁琐操作。