当前博客:图片框如何只显示某个范围?

105 次浏览【转载需注明来源】

博客作者:【1324****1696】

个性签名:寒窗苦读十年,一朝凤舞九天

比如图片是长方形的,宽高比是2比1,

图片框设置宽高是300px*300px,怎样保持图片比例,显示图片中间位置

默认排序
Generic placeholder image
Generic placeholder image
已采纳
A迅捷云安全 Time: 2024-03-14 20:14:54
<区块 类名="区块样式">
            <图片框 图像地址="@文件_1710386423871577.jpg" 类名="图片框样式" />
        </区块>
        <样式>
            .区块样式 {
                宽度: 300px;
                高度: 300px;
                定位: 相对定位; /* 设置为相对定位,以便内部元素可以绝对定位 */
                溢出: 隐藏; /* 隐藏超出容器的图片部分 */
            }
            .图片框样式 {
                定位: 绝对定位; /* 绝对定位以根据容器定位图片 */
                顶部: 50%; /* 从容器顶部向下偏移50% */
                左侧: 50%; /* 从容器左侧向右偏移50% */
                转换: 平移(-52%, -50%); /* 反向偏移图片自身宽高的50%,实现中心点对齐 */
                最大-高度: 100%; /* 图片最大高度不超过容器高度 */
                宽度: 自动; /* 宽度自动以保持宽高比 */
            }
        </样式>
Markup

图片换成你的

平移应该是-50的  我改成52是因为匹配你那张图划的红线

Generic placeholder image
qiang Time: 2024-03-14 13:40:13

用背景吧


图片框如何只显示某个范围?