Thymeleaf的引用

在Thymeleaf模板中，使用`th:src`引入图片时，如果图片超出边界，可以通过CSS样式来处理。以下是一些常见的方法： 1. **使用CSS的`max-width`和`max-height`属性**： 通过设置`max-width`和`max-height`，可以确保图片不会超出其容器的边界。 ```html <div style="width: 200px; height: 200px; overflow: hidden;"> <img th:src="@{/images/example.jpg}" style="max-width: 100%; max-height: 100%;"> </div> ``` 2. **使用CSS的`object-fit`属性**： `object-fit`属性可以控制图片如何适应其容器。常用的值有`cover`和`contain`。 ```html <div style="width: 200px; height: 200px; overflow: hidden;"> <img th:src="@{/images/example.jpg}" style="width: 100%; height: 100%; object-fit: cover;"> </div> ``` 3. **使用CSS的`overflow`属性**： 通过设置`overflow`属性，可以控制超出部分的内容显示方式。常用的值有`hidden`和`auto`。 ```html <div style="width: 200px; height: 200px; overflow: hidden;"> <img th:src="@{/images/example.jpg}" style="width: 100%; height: 100%;"> </div> ``` 4. **使用CSS的`resize`属性**： `resize`属性可以控制用户如何调整元素的大小。常用的值有`none`和`both`。 ```html <div style="width: 200px; height: 200px; overflow: hidden;"> <img th:src="@{/images/example.jpg}" style="width: 100%; height: 100%; resize: none;"> </div> ``` 通过这些方法，可以有效地控制图片在容器中的显示方式，避免图片超出边界。