我想在从数据库加载的.net页面上显示图像(金额因此可能会有所不同)。所有图像分别具有不同的宽度和高度,分别高达130px和60px。我想把图像放入容器元素,固定宽度为130px,固定高度为60px。图像应该垂直和水平居中。如果可能,容器元件应水平对齐。
我试过div(带浮点)和范围。使用div,我可以获得固定的尺寸,但不能将图像居中。有了跨度,我可以居中,但不能设置任何大小。如果我把span放入div,它似乎表现得像div(居中被忽略)。固定大小的容器元素中心图像(CSS,HTML)
回答
你可以看到它在http://jsfiddle.net/km5dk/8/
工作,但我觉得你搜索这样的事情。
### HTML ###
<div id="container">
<div class="image-container">
<img src="#" alt="A image" />
</div>
</div>
### CSS ###
#container {
width: 130px;
height: 60px;
display: table;
background-color: #ccc;
}
#container .image-container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
#container .image-container img {
max-width: 160px;
max-height: 60px;
}
如果你有一个IMG标签里面的divs,使用margin:0px自动div div;
垂直方向:
display:table-cell; vertical-align:middle;
这不会使图像垂直居中。 – 2012-03-28 17:07:58
显示:table-cell; vertical-align:middle; – user92254225 2012-03-28 17:20:15
我还在学习自己刚开始做HTML/CSS大约两个星期前,但这似乎工作的伟大已经悬停,点击,说明框,标题框,居中的图像。
您也可以将CSS代码放在单独的样式表中。我以为我会让他们一起为这个职位。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
color:white;
}
#container
{
width:18em;
height:18em;
}
#title-image
{
background-image:url('http://www.gravatar.com/avatar/cd1954c9caf7ffc02ab18137967c4bc9?s=32&d=identicon&r=PG');
background-repeat:no-repeat;
background-position:center;
border:1px solid RGBa(255, 255, 255, 0.1);
background-color:RGBa(127, 127, 127, 0.1);
color:#CFCFCF;
width:10em;
height:10em;
margin-left: 3.9375em;
margin-right: 4em;
text-align:center;
display: block;
}
#title-image:hover
{
border:1px solid RGBa(255, 255, 255, 0.15);
background-color:RGBa(127, 127, 127, 0.15);
color:#FFFFFF;
}
#description
{
width: 18em;
border:1px solid RGBa(255, 255, 255, 0.03);
background-color:RGBa(127, 127, 127, 0.03);
text-align:center;
display: block;
}
</style>
</head>
<body>
<div id="container">
<a href="google.com" id="title-image">This is your Title?</a>
<p id="description">Your description<br>Can go here.</p>
</div>
</body>
</html>
思考一个小框外(借口故意双关语!),你可以使用background-size
在你的容器的CSS规则,background-image: url(this_image.jpg);
作为个体容器本身内嵌的风格。 这将处理所有缩放为你在一个更小和整洁的包。
设置background-size: cover;
会缩放图像,使最小尺寸匹配(尽管可能会有一些裁剪),并且background-size: contain;
将确保整个图像适合。
这是另一种选择......
丹尼
使用的定位。以下为我工作:
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
自举3,你可以添加一个img响应中心块类居中的图像
<img class="img-responsive center-block" src="my_image.png" />
化妆形象中心
.image-container {
width: 500px;
height: 500px;
position: relative;
}
.image-container img {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
自动调整图像大小以适应div容器
.image-container img {
max-height: 100%;
max-width: 100%;
}
- 1. 固定大小的容器中的不同图像大小
- 2. 浏览器调整大小时CSS/HTML固定位置元素调整大小
- 3. CSS固定页脚宽度调整图像中心大小
- 4. HTML固定的大元素
- 5. CSS固定水平中心元素
- 6. 如何中心的位置:固定的元素 - HTML CSS
- 7. 固定的CSS元素调整大小/缩放到浏览器
- 8. 确定伪元素图像的大小以匹配容器
- 9. CSS:如何填充包含固定大小元素的动态容器?
- 10. 固定图像大小
- 11. 如何缩小html元素以适合固定大小的div?
- 12. css,固定大小
- 13. 垂直对齐固定大小的中心图像div
- 14. div元素的固定大小
- 15. 仅在元素之间的CSS固定大小的边距
- 16. 容器内的固定定位元素
- 17. C#.NET:调整容器div元素内的图像的大小
- 18. 使用CSS固定位置定位的中心元素
- 19. 尽管设备像素比例固定的图像大小
- 20. CSS背景图像 - 缩小以适合固定大小div
- 21. CSS定位 - 修复中心 - 固定的左和固定右元素
- 22. HTML/CSS/JAVASCRIPT - 缩放固定大小的物品以适应流体容器
- 23. 放大/缩小容器中心的可拖动图像
- 24. 在Android浏览器中显示HTML中指定的元素大小的CSS
- 25. HTML固定容器
- 26. Xamarin Forms固定大小的图像
- 27. 固定大小的缩略图像twitpic.com
- 28. HTML:以非固定大小居中放置图像
- 29. 固定元素的子元素的大小调整不正确
- 30. 如何对齐相对容器内的css固定元素?
不错的解决方案,尽管它似乎不适用于Internet Explorer(但在Firefox和Chrome中)。在IE中,垂直对齐没有完成。 – AGuyCalledGerald 2012-03-29 09:52:55
Internet Expolore 8和更高版本支持垂直对齐。这个例子在IE7中并不适用于过去几年的很多技术。 它应该在IE8或更高版本中工作。 – 2012-03-29 10:01:21
嗯,我在IE 9中试过了,它适合你吗? – AGuyCalledGerald 2012-03-29 10:58:42