具有图像的响应式网格框会自动调整大小 [英] Responsive grid box with image automatically resize
本文介绍了具有图像的响应式网格框会自动调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我写这个代码来得到这种盒子。但代码不完整请参阅我的代码，
<！DOCTYPE html>
< html lang =en>
< head>
< title>引导程序示例< / title>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>
< / head>
< body>
< style>
.row {
width：90％;
保证金余额：5％;
保证金 - 右侧：5％;
}
.hig-co {
width：66.6677％！important;
最大宽度：66.667％！重要;
最小宽度：66.667％！重要;
}
.sm-co {
width：33.333％！important;
最大宽度：33.333％！重要;
最小宽度：33.333％！重要;
}
.hig-all {
width：95％;
}
< / style>
< div class =container>
< div class =row>
< div class =all>
< div class =hig-co>
< div class =hig-all>
< img src =＃/>
< / div>
< div class =hig-all>
< div class =col-md-4 col-sm-4>
< img src =＃>
< / div>
< div class =sm-co>
< img src =＃>
< / div>
< / div>
< / div>
< div class =col-md-3 col-sm-12 sm-co>
< div class =col-md-12 col-sm-12>< img src =＃>< / div>
< div class =col-md-12 col-sm-12>< img src =＃>< / div>
< div class =col-md-12 col-sm-12>< img src =＃>< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
请帮助完成此操作。
在这里，我必须做出几乎相同的结果。所以请帮助使这种结构使用CSS。请不要只在屏幕尺寸最小宽度为766px时显示此布局。如果屏幕尺寸小于766px，我将使用媒体查询来隐藏此布局。做这个布局后，我会插入图片到这个布局。所以图像需要自动适应这种布局。
解决方案
这是一个使用Flexbox的简单解决方案，您可以轻松调整不同的尺寸：
body {margin：0;} * {box-sizing：border-box;} div {border：1px solid #fff;}。container {display：flex; height：100vh;}。left {flex：3;显示：弯曲; flex-wrap：wrap;}。left> div：第n个孩子（1）{宽度：100％;高度：40％;背景：红色;}。left> div：第n个孩子（2）{宽度：33％;高度：60％;背景：红色;}。left> div：第n个孩子（3）{flex：1; background：blue;}。right {flex：2;显示：flex; flex-direction：column;}。right> div：第n个孩子（1），右侧> div：第n个孩子（3）{身高：25％;背景：红色;}。右侧> div：nth-child（2）{flex：1;背景：blue;}
< div class =container > < div class =left> < DIV>< / DIV> < DIV>< / DIV> < DIV>< / DIV> < / DIV> < div class =right> < DIV>< / DIV> < DIV>< / DIV> < DIV>< / DIV> < / div>< / div>
assume I try to get almost similar kind of result.
So i write this code to get this this kind of box . But the code is not complete Please see my code ,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.row{
width:90%;
margin-left:5%;
margin-right:5%;
}
.hig-co{
width:66.6677% !important;
max-width:66.667% !important;
min-width:66.667% !important;
}
.sm-co{
width:33.333% !important;
max-width:33.333% !important;
min-width:33.333% !important;
}
.hig-all{
width:95%;
}
</style>
<div class="container">
<div class="row">
<div class="all">
<div class="hig-co">
<div class="hig-all">
<img src="#" />
</div>
<div class="hig-all">
<div class="col-md-4 col-sm-4">
<img src="#">
</div>
<div class="sm-co">
<img src="#">
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 sm-co">
<div class="col-md-12 col-sm-12"><img src="#"></div>
<div class="col-md-12 col-sm-12"><img src="#"></div>
<div class="col-md-12 col-sm-12"><img src="#"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Please help to complete this .
Here I have to make almost same kind of result. So Please help to make this kind of structure using css . Please not i will display this layout only if screen size min width is 766px. If the screen size less than 766px i will hide this layout using media query . After making this layout i will insert images to this layout . So images need automatically fit in this layout .
解决方案
Here is a simple solution using Flexbox where you can easily adjust the different sizes:
body {
margin: 0;
}
* {
box-sizing:border-box;
}
div {
border:1px solid #fff;
}
.container {
display: flex;
height: 100vh;
}
.left {
flex: 3;
display:flex;
flex-wrap:wrap;
}
.left > div:nth-child(1) {
width:100%;
height:40%;
background:red;
}
.left > div:nth-child(2) {
width:33%;
height:60%;
background:red;
}
.left > div:nth-child(3) {
flex:1;
background:blue;
}
.right {
flex: 2;
display: flex;
flex-direction: column;
}
.right > div:nth-child(1),.right > div:nth-child(3) {
height:25%;
background:red;
}
.right > div:nth-child(2) {
flex:1;
background:blue;
}
<div class="container">
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
</div>
</div>
这篇关于具有图像的响应式网格框会自动调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
