<!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. 2.Map中hashMap和hashTable两个的对比

    我们来对比一下hashMap和hashTable吧: 1.hashMap允许键.值可以为空,hashTable键和值都不可以为空,为什么这样呢,我们来看一下他们的put方法的源码. 先看hashMap ...

  2. bootstrap联动校验（转载）

    接触bootstrapvalidator时间不久,最近需要多个字段共同验证,网上查了一下未找到,查阅api文档,发现确实可以实现. 先看dom <div class="form-gro ...

  3. lighting

    lighting lighting 是基于 nodejs 构建的一个命令行工具,使用 lighting 可以快速搭建 H5.APP.RestAPI 的开发工程环境(结合 VSCode 最佳).本地开发 ...

  4. Module build failed: TypeError: this.getResolve is not a function at Object.loader sass报错！（亲测有效！~~）

    vue安装node-sass编译报错 在搭建vue脚手架 或者是在vue项目中,想使用sass的功能,需先安装如下 npm install node-sass --save-dev //安装node- ...

  5. ES5中, map 和 forEach的区别

    forEach和map区别在哪里知道吗? // forEach Array.prototype.forEach(callback(item, index, thisArr), thisArg) // ...

  6. vue中父组件向子组件传值问题

    问题:当父组件传值给子组件echarts时,发现子组件获取的props为空,刚开始以为是钩子函数放错了地方,后来发现从mounted和created都不行.当在父组件data定义传递的数据的时候子组件 ...

  7. kbhit函数说明

    kbhit,用来检测键盘是否被敲击.所以就有了他的名字:keyboard hit 当键盘有按键被按下时,kbhit函数就会返回一个非0值. 当我们在写某个程序时,希望读入一些字符,但是又不能停在那里只 ...

  8. Bugku-CTF分析篇-手机热点（有一天皓宝宝没了流量只好手机来共享，顺便又从手机发了点小秘密到电脑，你能找到它吗？）

    手机热点 httppan.baidu.coms1cwwdVC 有一天皓宝宝没了流量只好手机来共享,顺便又从手机发了点小秘密到电脑,你能找到它吗? 题目来源:第七季极客大挑战  

  9. Codeforces Round #598 (Div. 3) F. Equalizing Two Strings

    You are given two strings ss and tt both of length nn and both consisting of lowercase Latin letters ...

  10. JAVA中对null进行强制类型转换

    今天很好奇,对null进行强转会不会抛错.做了如下测试得到的结果是,如果把null强转给对象,是不会抛异常的,本身对象是可以为null的.但是如果是基本类型,比如 int i = (Integer)o ...