网页图片如何调整<div class="col-12 col-md-6"？

要调整图片大小，可以在 CSS 中设置 width 和 height 属性来控制图片的宽度和高度。例如，可以在图片的父元素（即 <div class="single-games-area">这个元素）中设置如下的 CSS 样式：

Copy code.single-games-area img { width: 100% height: auto

}

上面的代码中，我们将图片的宽度设置为 100%，这样图片就会占满整个父元素的宽度。同时，我们将图片的高度设置为 auto，这样图片的高度就会根据宽度自动调整，从而保证图片的宽高比不变。

另外，如果你想让图片显示得更大一些，还可以尝试使用 zoom 属性来放大图片，例如：

Copy code.single-games-area img { width: 100% height: auto

zoom: 1.5

}

你好，设置方法如下：

首先，简单介绍一下boostrap，它是一个前端的CSS框架，在它的库里面集成了好多CSS样式。我们可以利用这个框架进行响应式布局。正因为它可以帮助我们进行响应式页面布局，其宽度才有了多种设定方法。

bootstrap是栅格布局的，不论屏幕宽度是多少，bootstrap都是将屏幕水平方向上分为12列，只是每列的宽度不同，

在boodstrap中div的宽度设定，可以使用库文件里面的col-lg-*,col-md-*和col-sm-*,col-xs-*四个class名称。

这四个名称分别对应了屏幕的四种宽度范围，我们需要在合适的屏幕，应用合适的class。这四个可以两两组合，也可以多个或者全部组合。

如果是两两组合时，当屏幕宽度变化时，css中会只有一个在起着决定性的作用。例如，我们将col-sm和col-md进行组合。

当这两个class进行组合的时候，在大于等于992像素的时候，是采用的col-md-*来设定div所占据的列数，当小于等于992并且大于等于768的时候，采用col-sm-*来决定div所占据的列数，小于768px的时候，默认div的宽度为其父级元素宽度的100%

一般情况下，我们都会设置col-md-*或者col-sm-*作为页面桌面布局时的div的宽度，但是这两个class单纯设定的区别，在于，如果是只设定col-md-*，那么当屏幕宽度小于992的时候，直接就是col-xs-12,如果是col-sm-*则是小于768px的时候是手机版的样式。这一点我们需要格外注意，通常情况下，小于768的时候是手机版的页面。

一、 el-col高度一致且内容居中

1.高度一致  

2.内容居中 

二、只内容居中:  align="middle"

---