网页图片如何调整<div class="col-12 col-md-6"？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页图片如何调整<div class="col-12 col-md-6"？相关的知识，希望对你有一定的参考价值。
代码如下：<div class="games-area section-padding-100-0"> <div class="container"> <div class="row"> <!-- Single Games Area --> <div class="col-12 col-md-6"> <div class="single-games-area text-center mb-100 wow fadeInUp" data-wow-delay="100ms"> <img src="img/bg-img/game1.jpg" alt=""> <a href="#" class="btn egames-btn mt-30">View Games</a> </div> </div>布局两个图片的大小，可图片显的很小气，怎么调整可以让图片不受限制。请各位大神帮忙看下，跪谢！
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;
参考技术A 你可以通过修改<img>标签的width和height属性来调整图片的大小，例如：
<div class="col-12 col-md-6">
<div class="single-games-area text-center mb-100 wow fadeInUp" data-wow-delay="100ms">
< img src="img/bg-img/game1.jpg" alt="" width="500" height="400">
<a href=" " class="btn egames-btn mt-30">View Games</a >
</div>
</div>
这里将图片的宽度设置为500像素，高度设置为400像素。你可以根据需要调整这些值。请注意，缩放图片的大小可能会导致图片失真，因此最好使用原始大小的图片来避免这种情况。
在div里面插入图片为啥会有空隙？
网页设计中一个简单的div ul li
参考技术A 具体你也没说清楚，不明白你的意思，不过你可以试下这个设置ul li的样式为none,list-style:none;不知道是不是你想要的效果 参考技术B 你按照这个方法来做吧！ 这个是我们老师的课课程：
在页面的<body></body>区域写出DIV的大结构：
<div id="header">此处显示 id "header" 的内容</div>
<div id="banner">此处显示 id "banner" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
<div id="footer">此处显示 id "footer" 的内容</div>
结果如图所示：
1、 现在我们要开始利用CSS来定义这些DIV标签的样式了；
首先，我们应该设置一些公共的样式，这样能有效避免以后出现的问题：
先设置BODY的样式；
新建样式文件后命名为index.css，并保存到css文件夹下；
2、 先设置全体的字体样式：
3、 再设置边框，边界距离为0
4、 再设置文字对齐方式：左对齐
完成后，在CSS样式文件里出现 body的标签如下：
body
font-family: Verdana, Arial, "宋体";
font-size: 12px;
color: #575757;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
这样我们就完成了通用标签公共body标签的样式设置，这时如果看页面，你会发现文字变了；
2、设立常用标签的外边距，内边距，边框为0，防止在排版时再重复定义和出现怪问题
div,form,img,ul,ol,li,dl,dt,dd margin: 0; padding: 0; border: 0;
这里特别说明的是：上面的代码中，意思是div,form,img,ul,ol,li,dl,dt,dd使用的属性一样，我们设置一次就可以了。不用每一个都设置；
3、现在CSS.css文件样式表里如下所示：
body
font-family: Verdana, Arial, "宋体";
font-size: 12px;
color: #575757;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
div,form,img,ul,ol,li,dl,dt,dd
margin: 0;
padding: 0;
border: 0;
现在正式开始我们的结构之旅吧！
第一个内容盒子content 是整个网页的范围，包括大小，对齐方式；
设置content的宽度，高度，对齐方式；851 X 658 居中对齐
小技巧：选中代码，再添加样式，这样样式名就自动出现在标签框内了；
设置方框属性如下：当边界左右为自动时，盒子会在页面居中；
在CSS里样式结果如下：
#content
height: 658px;
width: 851px;
margin-right: auto;
margin-left: auto;
现在按照content的方式分别设置好几个大盒子的高度，宽度，并设置一个背景色用来区分；
并使用/*注释*/的方式添加好说明，添加好后结果如下：
/*--公共标签*/
body
font-family: Verdana, Arial, "宋体";
font-size: 12px;
color: #575757;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
div,form,img,ul,ol,li,dl,dt,dd
margin: 0;
padding: 0;
border: 0;
/*--内容--*/
#content
height: 658px;
width: 851px;
margin-right: auto;
margin-left: auto;
/*--头部导航开始--*/
#header
background: #CCCCCC;
height: 81px;
width: 851px;
/*--头部导航结束--*/
/*--BANNER开始-->*/
#banner
background-color: #999900;
height: 299px;
width: 851px;
/*--BANNER结束--*/
/*--主体内容开始--*/
#main
background-color: #FF9900;
height: 234px;
width: 851px;
/*--主体内容结束--*/
/*--版权内容开始--*/
#footer
background-color: #ccff00;
height: 45px;
width: 851px;
/*--版权内容结束*/
在网页中查看如下：
制作第四步：我们来看今天的重点：
将内容区域main的两个并列的区域排出来；
news和products是并列的，这就要用到浮动属性了float=left
1、首先在main标签里增加两个盒子，news 和products
<div id="content">
<div id="header">此处显示 id "header" 的内容</div>
<div id="banner">此处显示 id "banner" 的内容</div>
<div id="main">
<div id="news">此处显示 id "news" 的内容</div>
<div id="products">此处显示 id "products" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</div>
按照前面的方法我们先设置好两个盒子的大小，并设置不一样的颜色:
加好后代码如下：/*--主体内容开始--*/
#main
background-color: #FF9900;
height: 234px;
width: 851px;
#main #news
background-color: #FF0000;
height: 235px;
width: 417px;
#main #products
background-color: #333300;
height: 235px;
width: 434px;
/*--主体内容结束--*/
我们再来看看结果：
NEWS和PRODUCTS没有水平排列，而是上下排列了，那么在DIV里如何才能水平排列两个盒子呢？
浮动
我们为news盒子添加一个左浮动;
#main #news
background-color: #FF0000;
height: 235px;
width: 417px;
float: left;
因为右边的盒子是向右对齐的，所以我们可以设置products盒子的右浮动；
#main #products
background-color: #333300;
height: 235px;
width: 434px;
float: right;
这样就显示正常了。
我们再看内容新闻部分：实际上左边有一部分是空的，没有用到，那么我们应该怎么办呢？还记得盒子有填充和边界吗？我们给盒子设置一个左边界，是不是就能解决这个问题呢。
以前宽度是417，现在多了85个左边界，所以内容的宽度就改为332了，但这个时候需要设置个内嵌，在IE6和火狐中测试结果就是一样的了；
#main #news
background-color: #FF0000;
height: 235px;
width: 332px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 85px;
display: inline;/*设置内嵌在火狐和IE中显示效果一样；*/
以上是关于网页图片如何调整<div class="col-12 col-md-6"？的主要内容，如果未能解决你的问题，请参考以下文章