Vueでの応答画像処理
<div class = " ins-pro-con " > <div class = " ins-con-top " > <el-image:src = " conTop " class = " con-top-image " > </ el-image> </ div> <div class = " con-foot " > <div class = " policy-title " > 1234rtfdswebv </ div> </ div> </ div>
データ(){ リターン{ Contop:(必要「../assets/images/calculationImage.png 」)、 // パスが独自に書くために、ここに私のプロジェクトのパスです。 } }、
css代码
/ * 親要素、2つの子要素は左と右の構造、左は画像、右は一部のテキストコンテンツ* / .ins -pro- {{ display:flex; } / * 左の要素の幅はこれに比例します要素は画像の親要素です* / .ins -con- top { width:37%; } / * 右の要素の幅の比率* / .con - foot { width:63%; } / * 画像に加えて、次の属性を選択できます左の画像をどのように高さと幅に合わせて縮小または拡大しても、左の領域に適応します* / .con -top- image { max -width :100%; height:100% ; }