, 放置在 单独的 div> 标签中 , 每个 div> 标签中放置一个 链接标签 , 在 链接标签中包裹一个 图片 ;
圆角和超过部分隐藏
在布局的 左上角 和 右上角 都有一个圆角 , 并且矩形图片超过圆角的部分被隐藏了 ,
设置圆角和超出部分隐藏样式 :
.brand {
/* 设置圆角后 超过圆角的图片不再显示...、设置浮动并精确计算宽度
在布局中 , 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置的 , 为父容器的三个子元素都设置 左浮动 , 就可以实现上述效果 ;
设置浮动后...宽度 , 设置图片后 , 会按照宽高比等比例缩放 ;
设置样式为 :
.brand div img {
/* 设置图片链接中的图片 在水平方向上充满父容器即可 */
width: 100%.../* 设置图片链接中的图片 在水平方向上充满父容器即可 */
width: 100%;
}
3、展示效果