byt315 2021-11-26 01:02 采纳率: 88.9%
浏览 27

请问如何CSS如何让Img标签里的图片随屏幕变化而变化,且同一行的图片对齐?

问题遇到的现象和发生背景 :

模仿华为官网的过程中发现推荐信息的模块图片的自适应和对齐解决不了

我的解答思路和尝试过的方法 :

HTML:用div标签包裹img标签,a标签,用img标签插入图片

        <div class="recommendation1">
            <a href="#">
                <img src="upload/recommendation1.jpg" alt="">
            </a>
        </div>

CSS:图片转化成inline-block,给外层的div设置magin值(做出华为官网的效果),div的宽高用百分数表示,img,a的宽高继承div的100%。

/*左图*/
.recommendation1 {
    left: 0;
    top: 0;
    display: inline-block;
    width: 63%;
    height: auto;
    margin-right: 30px;
    margin-bottom: 30px;
}
/*右图*/
.recommendation2 {
    right: 0;
    top: 0;
    display: inline-block;
    width: 33%;
    height: auto;
    margin-bottom: 30px;
}
.recommendation a {
    width: 100%;
    height: 100%;
}
.recommendation a img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

但因为margin是固定的30px,屏幕变化的过程中图片占的百分比变化,到一定程度会挤到下一排,而且图片无法对齐。

我想要达到的结果:

让Img标签里的图片随屏幕变化而变化,且同一行的图片对齐

  • 写回答

2条回答 默认 最新

  • hou1988426 2021-11-26 15:29
    关注
    
    img{ float:left; display: block; max-width: 100%;}
    

    代码实例下载地址 https://download.csdn.net/download/hou1988426/49768914

    前提 条件 多图 一行 就并排 ,所以涉及到 原始图片宽度 有关联!

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 11月26日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名