CSS图片img标签根据宽度或高度相互自适应

实现效果：img标签，限制图片的高度或宽度，当高度或宽度达到限制时，未达到限制的边不改变图片的比例自适应缩放；代码实例：这里贴出基于vue的完整的html文件，直接看样式在底部style标签内<!DOCTYPE html><html><head><meta charset="UTF-8"><meta content="width=device-

8019人浏览 · 2020-06-28 12:02:19

· 2020-06-28 12:02:19 发布

实现效果：img标签，限制图片的高度或宽度，当高度或宽度达到限制时，未达到限制的边不改变图片的比例自适应缩放；

代码实例：这里贴出基于vue的完整的html文件，直接看样式在底部style标签内

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-container class="container">
            <el-header>
                <h4>{{ message }}</h4>
            </el-header>

            <el-main>
                <el-row :gutter="20">
                    <el-col :sm="24" :md="20">
                        <div class="grid-content">
                            <div><h4>欢迎使用 Element</h4></div>
                            <div>
                                <div>文本</div>
                                <div class="centent-img">
                                    <img src="http://a1.att.hudong.com/05/00/01300000194285122188000535877.jpg">
                                </div>

                                <div class="centent-img">
                                    <img src="http://img50.photophoto.cn/20190123/0008118076305063_s.jpg">
                                </div>

                                <div class="centent-img">
                                    <img src="http://t9.baidu.com/it/u=3363001160,1163944807&fm=79&app=86&f=JPEG?w=1280&h=830">
                                </div>

                            </div>
                            
                        </div>
                    </el-col>
                    <el-col :sm="24" :md="4">
                        <div class="grid-content bg-purple">
                            <el-button @click="visible = true">按钮</el-button>
                            <el-dialog :visible.sync="visible" title="Hello world">
                                <p>欢迎使用 Element</p>
                            </el-dialog>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>
                {{ message }}
            </el-footer>
          </el-container>
        
    </div>
    

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',

            data: {
                message: 'Hello Vue!',
                visible: false
            },

            created: function () {
                this.findDiary();
            },

            methods: {
                findDiary: function() {
                    console.log("test");

                }
            }
        })
    </script>

    <style>
        /* 页面内容居中 */
        #app {
            display: flex;
            justify-content: center;
        }

        /* 页面内容最大宽度 */
        .container {
            max-width: 1200px;
        }

        .grid-content {
          border-radius: 0.2rem;
          min-height: 4rem;
        }

        /* 图片所在div，和img的样式结合达到自适应目的*/
        .centent-img {
            width:100%;
            /* 最大宽度设置 */
            max-width: 32rem;
            display: table;
            /* 居中 */
            margin: 2rem auto; 
        }

        .centent-img img {
            object-fit: cover;
            object-position: center;
            max-width: 100%;
            /* 最大高度设置 */
            max-height: 32rem;
            display: block;
            /* 居中 */
            margin: 0 auto;
        }
      </style>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^