系列文章目錄
一、elementui 導(dǎo)航菜單欄和Breadcrumb 面包屑關(guān)聯(lián)
二、elementui 左側(cè)導(dǎo)航菜單欄與main區(qū)域聯(lián)動(dòng)
三、elementui 中設(shè)置圖片的高度并支持PC和手機(jī)自適應(yīng)
四、elementui 實(shí)現(xiàn)一個(gè)固定位置的Pagination（分頁(yè)）組件
前言
在使用Element UI時(shí)，可以通過(guò)樣式覆蓋來(lái)實(shí)現(xiàn)圖片的高度在PC和移動(dòng)端的自適應(yīng)，可以使用CSS媒體查詢來(lái)為不同的屏幕尺寸設(shè)置不同的樣式。
一、實(shí)現(xiàn)步驟
設(shè)置圖片的高度以適應(yīng)不同的設(shè)備：
<template>
<el-image
style="width: 100%"
src="your-image-url.jpg"
fit="contain"
></el-image>
</template>
<style>
/* 針對(duì)所有設(shè)備的基礎(chǔ)樣式 */
.el-image {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/* 針對(duì)平板和桌面電腦的樣式 */
@media (min-width: 768px) {
.el-image {
height: 500px; /* 或者你想要的任何固定高度 */
}
}
/* 針對(duì)手機(jī)的樣式 */
@media (max-width: 767px) {
.el-image {
height: 300px; /* 適應(yīng)手機(jī)屏幕的高度 */
}
}
</style>
.el-image 類被用來(lái)設(shè)置圖片的基本樣式，包括最大寬度為100%，并且高度自適應(yīng)。媒體查詢 @media 被用來(lái)為不同的屏幕尺寸范圍設(shè)置特定的高度。768px是一個(gè)常見(jiàn)的斷點(diǎn)，用于區(qū)分桌面和平板。更小的寬度（max-width: 767px）意味著設(shè)備被認(rèn)為是手機(jī)。你可以根據(jù)實(shí)際需求調(diào)整斷點(diǎn)和高度值。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-849820.html
二、項(xiàng)目應(yīng)用最終效果
1.演示鏈接：http://101.43.20.112/
2.手機(jī)端實(shí)現(xiàn)效果：
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-849820.html
到了這里，關(guān)于element UI中設(shè)置圖片的高度并支持PC和手機(jī)自適應(yīng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
