<!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. 1.EntityManaget的persist和merge方法的区别

    1.persist和merge的区别: Persist:添加 Merge : 分两种情况,当对象存在id,则修改:当对象不存在id则添加. 看个例子: 1 public class Account { ...

  2. nginx知识学习

    设备: macbook 有用的命令行: sudo nginx -t  测试nginx是否正常 sudo nginx -s reload  平滑重启 配置目录: /usr/local/etc/nginx ...

  3. Axure 8.1.0.3377 激活码 授权码 （亲测有效）

    适用版本 Axure 8.1.0.3377 zdfans.com gP5uuK2gH+iIVO3YFZwoKyxAdHpXRGNnZWN8Obntqv7++FF3pAz7dTu8B61ySxli 亲测 ...

  4. Flink架构（一）- 系统架构

    1. 系统架构 Flink是一个分布式系统,用于有状态的并行数据流处理.也就是说,Flink会分布式地运行在多个机器上.在分布式系统中,常见的挑战有:如何对集群中的资源进行分配与管理.协调进程.数据存 ...

  5. 题解 【Codeforces387B】George and Round

    以下选自官方题解: 考虑困难的需求数量,我们将覆盖这些困难, 然后我们将提出新的问题,并准备新的问题来覆盖其他需求. 很明显,如果我们决定满足从n中抽取i的要求,那么最好采用那些复杂性最小的要求. 让 ...

  6. 如何更改已经pushed的commit的注释信息（How to change the pushed commit message）

    1, 修改最后一次注释(Modify the last comment message) git commit -amend 2,修改之前的注释 1)输入: git rebase -i HEAD~3 ...

  7. js数组和对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Reinforcement Learning，微信公众号：DRL学习

    欢迎大家关注微信公众号:DRL学习,我们一起来学习强化学习和深度强化学习的算法及现状应用问题. 强化学习简单说就是学习如何最大化未来奖励的预期总和,以及agent学会在环境中做出的行动序列,其中随机状 ...

  9. C语言随笔5：函数、函数指针

    函数 C语言中函数参数传递时,将实参的值拷贝到函数参数的存储区中.这种传递参数的方式称为按值传递. 函数不会访问实参本身,访问的是函数存储在栈区的副本,不会改变实参.函数凋用结束,函数在栈区的内容释放 ...

  10. Mac系统升级后git没法使用的问题

    今天更新了mac系统(Catalina)发现之前的项目没法提交,然后大概查了一下啊mac更新方面的问题 mac每次更新时系统就会卸载xcode 在终端输入  xcode-select --instal ...