这是我关于Stack Overflow的第一篇文章,但我已经在这里找到了多年的答案.这是我似乎无法找到的.
我想知道是否有办法只使用HTML和CSS执行以下操作.
我有一个流畅的布局,我想保持图像流畅.我目前通过使用max-height:100%和max-width:100%属性来设置每个图像来填充它们各自的div.
在悬停时,我希望图像具有略微透明的颜色叠加,并显示一些文本和一个按钮.
如果我定义图像/ div宽度,我能够做到这一点,但是我无法弄清楚如何在保持图像的同时动态地重新调整大小.
这是流畅布局中4个图像的小提琴.任何帮助都会非常感激,我觉得我忽略了一些东西.
和代码:
HTML
<body>
<div id="container">
<div class="span4 red">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 blue">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 green">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
<div class="span4 purple">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
</div>
</div>
</body>
CSS
body { margin:0;}
#container { width:100%; font-size:0;}
img { max-width:100%; max-height:100%;}
.span4 { width:25%; display:block;}
.red { background-color: red; float:left; overflow:hidden;}
.blue { background-color: blue; float:left; overflow:hidden;}
.green { background-color: green; float:left; overflow:hidden;}
.purple { background-color: purple; float:left; overflow:hidden;}