首先html为:

<div class="box1"><img src="data:images/more-1.jpg"></div>

1,由于引用的图片可能过大,所以要设置img标签的宽度,其高度等比例增加,css代码为:

.box1{
width:3.8px;
height: 3.8px;
border:1px solid red;
}
.box1 img{
width:2.9px;
border: 1px solid green;
}

浏览器中形成

如果不设置img的宽度,只设置div的宽度,造成的后果是图片显示不全:

div下的img标签中图片的大小设定的更多相关文章

  1. 一段JS控制TD中图片的大小的代码

    一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...

  2. ie7下<a></a>标签中<input />时不反应

    <a href="News?id=@dr["id"].CInt()" ><input type="button" valu ...

  3. img标签中alt属性与title属性在seo的作用-摘自网友

    img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明.alt属性是图片的替换文字.title属性规定元素的额外信息,有视觉效果. 目录 alt属性 title属性 ie和f ...

  4. Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js

    在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...

  5. 在Spring框架中bean配置文件中constructor-arg标签中没有name元素?

    bean配置文件出现错误的依赖: <beans <beans xmlns="http://www.springframework.org/schema/beans"   ...

  6. 10-2 body标签中相关的标签(字体标签,排版标签(div,span),超链接,图片标签)

    一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...

  7. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  8. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. JS 验证一组input框是否为空的方法

    function checkInput() { var $tr = $("#tb_confirmed .scrollContent").find("tr"); ...

  2. unity3d摄像机入门01

    Clear Flags 清除标记 决定屏幕的哪部分将被清除.当使用多个相机来描绘不同的游戏景象时,利用它是非常方便的  Background 背景 在镜头中的所有元素描绘完成且没有天空盒的情况下,将选 ...

  3. nosql(1)---radis

    Radis是一个key-value数据库,它会将key放入内存中,value放在硬盘上.  可以将数据持久化存储到磁盘. 内置的主从复制: master server和slave server之间有内 ...

  4. ios应用数据存储方式

    一.ios应用常用的数据存储方式 1.plist(XML属性列表归档) 2.偏好设置 3.NSKeydeArchiver归档(存储自定义对象) 4.SQLite3(数据库,关系型数据库,不能直接存储对 ...

  5. Git ~ 管理修改 ~ Gitasd

    现在假设你一经常我了暂存区的概念 , 下面我们将要讨论的就是 , 为什么 Git 比其他的版本控制系统设计的优秀 , 因为 Git 跟踪管理的是修改而非文件 什么是修改  ? 修改就是 你在某个地方 ...

  6. python简介-copy

    首先python的老家https://www.python.org/ 原文http://www.runoob.com/python/python-intro.html Python 简介 Python ...

  7. 如何去除内联元素(inline-block元素)之间的间距(转载)

    如何去除内联元素(inline-block元素)之间的间距   前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px; ...

  8. [Camel Basics]

    Define routes: Either using Spring xml or Java DSL. Spring xml: <camelContext> <routeBuilde ...

  9. Mac快捷键 Xcode快捷键

    Mac OSX 快捷键&命令行   一.Mac OSX 快捷键 ctrl+shift                                    快速放大dock的图标会暂时放大,而 ...

  10. 小P的图论课 (模拟退火)

    uses math; ; INF=; var n,m,i,x,y,sum,ans,delta:longint; map:..maxn,..maxn] of longint; flag:..maxn] ...