element UI中设置图片的高度并支持PC和手机自适应-Toy模板网

这篇具有很好参考价值的文章主要介绍了element UI中设置图片的高度并支持PC和手机自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

系列文章目录

一、elementui 导航菜单栏和Breadcrumb 面包屑关联

二、elementui 左侧导航菜单栏与main区域联动

三、elementui 中设置图片的高度并支持PC和手机自适应

四、elementui 实现一个固定位置的Pagination（分页）组件

前言

在使用Element UI时，可以通过样式覆盖来实现图片的高度在PC和移动端的自适应，可以使用CSS媒体查询来为不同的屏幕尺寸设置不同的样式。

一、实现步骤

设置图片的高度以适应不同的设备：

<template>
  <el-image
    style="width: 100%"
    src="your-image-url.jpg"
    fit="contain"
  ></el-image>
</template>
 
<style>
/* 针对所有设备的基础样式 */
.el-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
 
/* 针对平板和桌面电脑的样式 */
@media (min-width: 768px) {
  .el-image {
    height: 500px; /* 或者你想要的任何固定高度 */
  }
}
 
/* 针对手机的样式 */
@media (max-width: 767px) {
  .el-image {
    height: 300px; /* 适应手机屏幕的高度 */
  }
}
</style>

.el-image 类被用来设置图片的基本样式，包括最大宽度为100%，并且高度自适应。媒体查询 @media 被用来为不同的屏幕尺寸范围设置特定的高度。768px是一个常见的断点，用于区分桌面和平板。更小的宽度（max-width: 767px）意味着设备被认为是手机。你可以根据实际需求调整断点和高度值。