[分享]css中如何让图片居中并且缩小

CSS是一种设计网页样式的语言，用它可以让网页的排版更加美观，其中让图片实现居中和缩小是经常会使用的技巧。首先，让图片居中，我们可以使用以下代码： img { display: block; marg...

CSS是一种设计网页样式的语言，用它可以让网页的排版更加美观，其中让图片实现居中和缩小是经常会使用的技巧。

首先，让图片居中，我们可以使用以下代码：

img {
    display: block;
    margin: 0 auto;
} 

在上面的代码中，我们给标签设定了展示为块级元素，并且赋予了margin的属性。在CSS中，我们可以用“margin: 　　 　　 ;”来表示四个方向的margin。而使用“0 auto”表示让图片的上下留白为0，左右两侧自动撑满铺满。

接下来，让图片缩小，使用以下代码：

img {
    width: 50%;
    height: auto;
} 

在上面的代码中，我们给标签设定了宽度为50%，高度自动调整。这样就实现了图片的比例缩放。由于确定了宽度，而让高度自动调整，所以图片不会改变原有的高宽比例。

当然，以上两种方法也可以同时使用，这样就实现了图片的居中缩小效果。

总之，CSS让我们在设计网页时具备了更多的创意和设计空间，通过使用以上的方法，让图片呈现更美观的布局和比例，进一步突出了网页的美感和风格。