<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
  width: 200px;
  height: 200px;
  border:2px solid #f00;
  border-radius: 50%;/* 圆角 */
  overflow: hidden;/* 这句是最主要的 可以使img显示在div的下面 */
}
div img{
  width: 200px;
  height: 200px;
}
</style>
</head>
<body>
  <div>
    <img src="data:image/4.jpg" >
  </div>

</body>
</html>

最后效果图下

如何让div中的img图片显示在div下面。的更多相关文章

  1. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  2. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  3. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  4. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

  5. 获取当前div中的文本(只获取当前div的, 子元素不要, 基于layui)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

    应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...

  7. 让DIV中的内容水平和垂直居中

    让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...

  8. div中的内容居中

    要使div中的内容居中显示,不仅div要设定“text-align:centr"  ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.

  9. 文本在div中始终垂直居中

    如果是文本字数固定,在div中垂直居中,相信大家都会 这边分享个不固定文本在div中垂直居中的方法 html代码 <div class="box"> <div c ...

随机推荐

  1. AcWing 874. 筛法求欧拉函数

    #include<bits/stdc++.h> using namespace std; typedef long long ll; ; int primes[N],cnt; int ph ...

  2. java_基础_注解

    注解(annotation),不是注释(comment) 注解可以对程序做说明,这一点和注释一样但是,注解还可以被其他程序读取,这是注释所不具备的 内置注解:@Override(表示重写父类方法)—— ...

  3. 阻塞队列BlockingQueue之ASynchronousQueue

    一.SynchronousQueue简介 Java 6的并发编程包中的SynchronousQueue是一个没有数据缓冲的BlockingQueue,生产者线程对其的插入操作put必须等待消费者的移除 ...

  4. CSS 盒子模型属性

    盒子模型(Flexible Box) 属性 属性 说明 CSS box-align 指定如何对齐一个框的子元素 3 box-direction 指定在哪个方向,显示一个框的子元素 3 box-flex ...

  5. FTP服务:使用 vsftpd 服务传输文件

    1.文件传输协议 今天的互联网是由几千万台个人计算机.工作站.服务器.小型机.大型 机.巨型机等具有不同型号.不同架构的物理设备共同组成的,而且即便是个人计算机,也 可能会装有 Windows.Lin ...

  6. 【C语言】复合函数求值

    例子:求复合函数F(G(X)),其中F(x)=|x-3|+|x+1|,函数G(x)=x^2-3x. 分析:从复合函数的结构可以看出,F函数的自变量为G函数的绝对值,可以将F函数和G函数作为独立的函数实 ...

  7. kali&BT5下利用nmap对mysql等数据库渗透与爆破

    如今Nmap的脚本引擎从一个普通的端口扫描器转变为具有攻击性的渗透测试工具 .随着nmap各种脚本的存在.到目前为止,我们甚至可以进行完整的SQL数据库渗透而不需要任何其他的工具. 今天就在kali下 ...

  8. Labview初识

    Labview2013安装教程 请访问http://wenku.baidu.com/link?url=Nw4pYpRqMupd9Bn3OfkFBoYM6Hhw9TqWvffZHX-GDQYPCTtqo ...

  9. Django框架-路由层

    Django框架-路由层 一.URL配置(URLconf) 1.基本格式 from django.conf.urls import url urlpatterns = [ url(正则表达式, vie ...

  10. 吴裕雄 python 机器学习——支持向量机线性分类LinearSVC模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets, linear_model,svm fr ...