css如何将图片绝对居左下

html-css025

css如何将图片绝对居左下,第1张

绝对居左下的方式：

图片包括任何的标签都是不能默认绝对居下的，都是需要通过css样式控制的，这个就要用到定位。给img添加一个绝对定位position:absoluteleft:0bottom:0也需要给它的某个父级添加一个相对定位。

img标签是向网页中嵌入一幅图像。

注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

<img>标签有两个必需的属性：src 属性 和 alt 属性。

让一个图片在div任意位置，可以使用绝对定位的方式。如下示例代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>测试页面</title>

</head>

<body>

<style type="text/css">

.test-box{width:300pxheight:260pxmargin:0px autoposition:relativeborder:1px solid #333}

.test-box img{position:absolutebottom:10pxleft:50%margin-left:-60pxborder:0}

</style>

<div class="test-box">

<img src="https://www.baidu.com/img/baidu_jgylogo3.gif?v=31680756.gif">

</div>

</body>

</html>

示例中做了一个宽为300px，高为260px像素的容器，其中图片通过绝对定位，控制其位于容器的水平居中，容器底部的位置。bottom:10px控制图片距离底部10px，left:50%、margin-left:-60px控制图片水平居中。其中的margin-left的值根据图片宽度变化，为负的二分之一图片宽度。

最终效果如下图：