<div style="background-image: url(http://your-image.jpg);">

　　<img src="http://your-image.jpg" style="opacity:0;" />
</div>

用图片去占位，把div高度撑开就可以显示背景图片

同时改变背景图和图片的宽高就可以做到div高度自适应背景图的高度啦

未知高度的div自适应图片高度的更多相关文章

  1. element-ui中轮播图自适应图片高度

    哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...

  2. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  3. 当div自适应的高度超过预设的高度的时候出现滚动条的办法

    方法一:主要是 min-height:50px; max-height:200px;overflow: auto; <div id="ss" style="widt ...

  4. React里单页面div自适应浏览器高度占满屏幕

    可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;

  5. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  6. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

  7. 怎么可以让div自适应屏幕的高度？（已解决）

    主要解决问题的方法是用JS脚本. 先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容. 我想把主体div的高度自适应屏幕剩余区域,怎么做? 首先,获取可见区域的高度,docu ...

  8. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

  9. 不定高度的div背景或背景图片不显示问题

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...

随机推荐

  1. ubuntu下C/C++获取剩余内存

    #include <stdio.h> #include <unistd.h> long get_memory_usage() { long page_size = syscon ...

  2. 信息安全之路-web-xss学习(2)

    存储型xss漏洞 该漏洞会将执行命令写入数据库,每一个用户在该页面停留时,都会被动执行该js命令,从而被盗取cookie 1.DVWA平台验证-low等级 <?php if( isset( $_ ...

  3. JVM即时编译器

    为何HotSpot虚拟机要使用解释器与编译器并存的架构? 为何HotSpot虚拟机要实现两个不同的即时编译器? 程序何时使用解释器执行?何时使用编译器执行? 哪些程序代码会被编译为本地代码?如何编译为 ...

  4. 关于Redis处理高并发

    Redis的高并发和快速原因 1.Redis是基于内存的,内存的读写速度非常快: 2.Redis是单线程的,省去了很多上下文切换线程的时间: 3.Redis使用多路复用技术,可以处理并发的连接.非阻塞 ...

  5. 20165306 Exp0 Kali安装 Week1

    20165306 Exp0 Kali安装 Week1 实验要求 Kali 下载 安装 网络 共享 软件源 步骤一.下载Kali 根据网址https://www.kali.org/ 下载kali 点击 ...

  6. script 修改 plist遇到的问题

    一个sh脚本每次build的时候动态修改info.plist文件 达到动态更改版本号的目的 但是估计是因为缓存的缘故 每次只有clean之后再运行才会修改成功 看script执行的log 好像是先修改 ...

  7. java的hello world

    public class HelloWorld { public static void main(String []args) { System.out.println("Hello Wo ...

  8. mysql主从同步与读写分离

    为了解决数据库服务的高可用问题以及负载均衡问题, 1正常情况下可以互为主从,均衡分担数据流量, 2防止数据库服务器在宕机的情况下可以顺利切换到正常的数据库服务器,减少公司的客户流量损失故公司需要搭建数 ...

  9. 使用Python编的猜数字小游戏

    import random secret = random.randint(1, 30) guess = 0 tries = 0 print("我叫丁丁,我有一个秘密数字!") p ...

  10. 设置IE浏览器跨域访问数据

    在开发中,经常会遇到多站点跨域访问后台服务获取数据的情况,解决方法有两种 自己写代理服务,访问代理服务,代理服务请求服务获取数据再返回: 设置浏览器可以跨域访问数据. 本文来讲如何设置IE浏览器跨域访 ...