图片显示的问题

比如我有两张图片一张是750*600 另一张是1920*1080 把这两张图片放到两个一样大小的div里面怎样才能让它们比例不失真呢如果给这两个div设置了一样的固定宽高比例肯定会失真如果只设置宽度的话虽然是等比例不会失真但图片的高度还是会差一点但是根据网页的布局这两个div宽高要一致而且图片不能失真一般这种情况怎么办呢？

阅读 4.8k

要想图片不失真，就等比例缩放。

第一种方式：写成背景图，显示图片的中间部分：

<style type="text/css">
            .wrap{
                width: 1200px;
                margin: 0 auto;
            }
            .box{
                width: 300px;
                height: 300px;
                border:1px solid #0066CC;
                float:left;
                margin: 10px;
            }
            .box1{
                background: url(1.jpg) no-repeat center 50%;
            }
            .box2{
                background: url(2.jpg) no-repeat center 50%;
            }
        </style>

        <div class="wrap">
            <div class="box box1"></div>
            <div class="box box2"></div>
        </div>

效果展示：

预览：https://ityanxi.github.io/seg...

第二种方式：写在img里，给图片的宽高都设为100%，会有一点点失真。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrap{
                width: 1200px;
                margin: 0 auto;
            }
            .box{
                width: 300px;
                height: 300px;
                border:1px solid #0066CC;
                float:left;
                margin: 10px;
            }
            .box img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box box1"><img src="1.jpg"/></div>
            <div class="box box2"><img src="2.jpg"/></div>
        </div>
    </body>
</html>

效果展示：

预览：https://ityanxi.github.io/seg...

第三种方式：给div加高度，超出的：overflow:hidden

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrap{
                width: 1200px;
                margin: 0 auto;
            }
            .box{
                width: 300px;
                height: 300px;
                overflow: hidden;
                border:1px solid #0066CC;
                float:left;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box box1"><img src="1.jpg"/></div>
            <div class="box box2"><img src="2.jpg"/></div>
        </div>
    </body>
</html>

效果展示：

预览：https://ityanxi.github.io/seg...

图片显示的问题

第一种方式：写成背景图，显示图片的中间部分：

第二种方式：写在img里，给图片的宽高都设为100%，会有一点点失真。

第三种方式：给div加高度，超出的：overflow:hidden

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

图片显示的问题

第一种方式：写成背景图，显示图片的中间部分：

第二种方式：写在img里 ，给图片的宽高 都设为100%，会有一点点失真。

第三种方式：给div加高度，超出的：overflow:hidden

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

第二种方式：写在img里，给图片的宽高都设为100%，会有一点点失真。