这是我试图实现的原型
这就是我现在所拥有的.
我从上一个问题中学到了Side to Side如何将选项列与图片对齐 – 使用display inline block attribute- Display.
现在我正在尝试对齐图片,这样图片就不会像原型一样超越娱乐选项.这是JSFiddle
看到div这样的块元素“占据了其父元素的整个空间” – Block Element,Css Height属性对我来说最有意义.
这是我在图像和包含图像的div中设置高度的代码
div
.sidebar { display:inline-block; vertical-align:top; width:70%; height:3%; }
#laptop { width:100%; height:3%; vertical-align: bottom; }
3%只是一个硬编码的测试值,但在这两种情况下,图像的高度都没有变化.我在这看到了另一个线程 – Height Thread但是那个人说要调整高度.
有没有人知道在这种情况下缩放图像的高度?
解决方法
我是如何解决这个问题的,我意识到,根据定义,div是一个“将自然扩展以适应其子元素”的
block element.
所以,我开始使用css宽度和高度attributes,并找到一个高度,使图像与娱乐组件对齐.
如果有人好奇,这里是我的最终img html标签代码(高度为240像素)
<img id="picture" align="middle" src="zoom-39988392-3.JPG" height = "240" width ="90" />