css font-face设置图片居中,大小自适应,给出示例代码
时间: 2023-11-01 13:13:15 浏览: 157
【css背景图片自适应】css怎么设置背景图片自适应大小
5星 · 资源好评率100%
好的,下面是一个基本的示例代码:
```css
@font-face {
font-family: "MyFont";
src: url("font.ttf");
}
.my-image {
display: block;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.my-text {
font-family: "MyFont", sans-serif;
}
```
在这个代码中, `@font-face` 是用来定义自定义字体的,我们创建了一个叫做 "MyFont" 的字体并指定了它需要的字体文件。对于图片,我们使用了一个类为 `.my-image` 的 CSS 样式。这个样式将图片设置为块级元素,然后使用 `max-width` 和 `max-height` 对图片的大小进行控制,保证它不会超过父元素的大小。最后,我们将 `margin` 设置为 `auto`,这表示使图片在其容器中水平和垂直居中。
除了图片外,我们还为其它文本内容指定了 "MyFont" 字体,使用了一个类为 `.my-text` 的样式。
阅读全文