更改 MUI img 大小

在 MUI 中，img 是一种常用的控件，用于展示图片。但有时候我们需要更改 img 的大小，以适应不同的需求。那么该如何进行呢？下面给出详细介绍。

方式一：在 CSS 中设置样式

我们可以在 CSS 中增加样式，以调整 img 的大小。具体方法如下：

/* 在样式表中设置 img 的宽和高 */
img {
  width: 100px;
  height: 100px;
}

上面的代码表示将img的宽和高都设置为100px。如果需要调整大小，只需要修改该值即可。

方式二：在 HTML 中设置宽高

我们也可以直接在 HTML 中设置 img 的宽和高，具体方法如下：

<img src="example.jpg" width="100" height="100">

上面的代码表示将 img 的宽和高都设置为100。这种方法较为简单，但不推荐使用，因为样式和内容应该分离，方便维护。

方式三：使用 MUI 的类名

MUI 提供了一些类名，可以用于调整 img 的大小。具体如下：

• mui-media-object mui-pull-left: 浮动图片，向左靠齐
• mui-media-object mui-pull-right: 浮动图片，向右靠齐
• mui-media-object mui-media-object-round: 圆形图片
• mui-media-object mui-media-object-small: 球形图片，高度与宽度相等
• mui-media-object mui-media-object-middle: 球形图片，高度与宽度为原来的1.5倍
• mui-media-object mui-media-object-big: 球形图片，高度与宽度为原来的2倍

例如，要设置一个宽度为100px、高度为100px的圆形图片，代码如下：

<img src="example.jpg" class="mui-media-object mui-media-object-round" style="width:100px; height:100px;">

上面代码中，通过类名设置图片为圆形，再通过样式设置宽高。

以上三种方法都可以达到调整 img 大小的效果，根据实际需求选择即可。