css如何设置高度等于宽度

2024-09-02

纯css设置元素高度与宽度相等

设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ width:100%; height:100%; position: absolute; } 如果仅仅想要外层div同宽高,而图片保持原图大小不被撑大, 可以将图片属性换成下面这个 .img-box img{ max-width:100%; max-height:100%; margin: auto

CSS中为什么有的元素能够设置高度，而有的元素却不能设置高度与宽度？

可以使用{display:block}将内联元素变为块级元素,同时使用{display:inline}将块级元素变为内联元素. {display:inline-block}又是怎么回事,根据张鑫旭老师<CSS的世界>中的解释可以理解为,每个元素都有两个盒子,外在的盒子和内在的盒子,外在的盒子负责元素是可以一行显示,还是只能换行显示,内在的盒子负责宽高.内容的呈现. {display:block} {display:inline} {display:inline-block}. 实际中我们常常见

css样式设置高度不定文本垂直居中

使用css实现文本垂直居中,对于支持display: table的浏览器来说,是比较容易实现的,只需要对外层div设置为table,内层div设置为table-cell,并设置文本垂直居中即可.但对于IE6/7,并不支持display:table,只能改用定位的方式来处理.外层div给一个定位,中间层div相对外层绝对定位,top为50%,内层span相对定位,top为-50%,通过正负50%的定位,使内容垂直居中. 相关演示代码(不管怎么改变div1的高度,都可以保证内容垂直居中,内容不限行数

使用 padding-bottom 设置高度基于宽度的自适应

我们在做移动端列表,通常会做到图文列表,列表是自适应的.当列表中有图片,图片的宽度是随着列表宽的变化而变化,我们为了在图片宽度变化的时候做到图片的不变形,所有采用以下办法. 本文章只讲语法 html 结构 <div class='detail'> <div class="person-pic-wrap"> <img :src='studentDetailDto.headPhoto'> </div> <div class="

js设置高度和宽度相等

<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="/templates/vshop/default/style/main.css?ver=1.121" rev="stylesheet" type="text/css"><script sr

如何给span设置高度宽度？

内容提要:给Span设置高度和宽度后没有作用.本文介绍了如何如何给span设置高度宽度. CSS模型中经常用的容器是DIV和span. 给Span设置高度和宽度后没有作用. <style type="text/css">  </style> <span class="demo">ww

[Android Pro] listView和GridView的item设置的高度和宽度不起作用

referece to : http://blog.csdn.net/beibeixiao/article/details/9032569 1. 在Android开发中会发现,有时listView和GridView的item顶层布局不起作用,即不能设置高度和宽度原因是当用自定义的adapter时,如果使用convertView= mInflater.inflate(R.layout.material_grid_item, null) 方法就不会起作用,这个方法的第二个参数是父View

## GridView 布局：item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##

一.item设置的高度和宽度不起作用转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和GridView的item设置的高度和宽度不起作用 referece to : http://blog.csdn.net/beibeixiao/article/details/9032569 1. 在Android开发中会发现,有时listView和GridView的item顶层布局不起

高度-宽度关系，同一div、不同div高度与宽度关系控制函数

//对象1的高度等于对象2的高度n倍,调用方法:Ht1DivideHt2('#div2','#div1',3)//div2的高度是div1高度的3倍function Ht1DivideHt2(obj1,obj2,n){ var oHeight= $(obj2).height()*n; $(obj1).css("height", oHeight); } //对象1的宽度等于对象2的宽度n倍,调用方法:Wd1DivideWd2('#div2','#div1',3)//div2的宽度是div

html页面设置<span>的高度和宽度

<span>标签属于行内元素(inline),所以无法设置高度和宽度:如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block): 1 span{display:inlie-block;} 实例演示:下面给出了两种样式,class1设置span 的宽高,class2改变span为行内块体元素,然后给其中一个span添加class1样式,另一个同时添加class1和class2样式,观察效果创建Html元素 1 2 <span class="

转：CSS设置HTML元素的高度与宽度的各种情况总结

1.元素不设宽度第一种情况:元素为文档流中元素<div style="width:100px;"> <div style="background:orange;">dd</div></div> <div style="width:200px;"> <div sty

css设置div高度与宽度相等的一种方法

div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百分比时,padding-top和padding-bottom使用的也是宽度的百分比,而不是高度的!!!),使div变成正方形. 2.这样设置后,还有问题,div里的内容都被挤到底部了.另外考虑div里文字本身的高度,修改为: div.category{ width:33%; padding:14%

【转】纯 CSS 实现高度与宽度成比例的效果

先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 CSS 定义如下: .item { float: left; margin: 10px 2%; width: 21%; } 这时遇到的一个需求:在保持 item 元素宽高比恒定(如高是宽的 1.618 倍)的情况下,使得 item 元素可以和父元素同比缩放. 我们知道,如果当 item 元素是图片,同

css 高度随宽度比例变化

[方案一:padding实现] 原理: 一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此. 使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果,将 padding-bottom设置为想要实现的 height 的值.同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值,从而实现需要的效果. <div class="father&quo

CSS实现高度和宽度自适应

其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewMarking.aspx.cs" Inherits="FirsteLite.OMS.Checking.NewMarking" %> <!DOCTYPE html PUBLIC "-//W3C//DTD

get新技能：如何设置元素高度与宽度成特定比例。宽度改变，高度自动按比例改变。例如设置宽高比16:9。

设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div class="wrapper"> <div class="content">content</div> </div> </div> //css 代码 div{ border: 1px solid green; } .c

【笔记】css 实现宽度自适应屏幕高度自适应宽度

如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要实现如下的黑科技了 div{ width: 100% height: 0 padding-top: 100% /* padding 设置为100% 的时候会等于其父容器的宽度 */ } 根据w3c 标准,当padding值为 100% 时其相等于元素自身包含块的宽度,所以把padding-top

CSS设置表格TD宽度布局

使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto : 大多数浏览器采用自动表格布局算法对表格布局:表格及单元格的宽度取决于其包含的内容. fixed :表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定:在当前列中,该单元格所在行之后的行并不会影响整个列宽. **注意** 使用 “fixed” 布局方式时,整个表格可以在其首行被下载后就

ueditor 设置高度height. ue.setHeight(400); 设置宽度 width

1.引入的文件: <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/ueditor.config.js"></script> <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/ueditor.all.js"></

第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法一．DOM 简介由于课程是基于 JavaScript 基础上完成的,这里我们不去详细的了解 DOM 到底是什么. 只需要知道几个基本概念: 1.D 表示的是页面文档 Document.O 表示对象,即一组含有独立特性的数据集合.M 表示模型,即页面上的元素节点和文本节点. 2.D

css如何设置高度等于宽度

热门专题