- the traditional practice is to write a div, and turn the image into a background image of the div, adding a positioning center and cover to fill it, or if you only use img, you can also try the object-fit attribute, which is the width and height value directly cover.
- layout can be inline-block or flex should be OK, if the spacing is known, then direct calc with vw/vmin should be fine, width and height are the same on the line.
question 1: pictures use background , background-size:cover . If lazy loading is involved or background cannot be used, it is not easy to do. If you want to compare width and height or cut, the size of the back end is usually clipped and sent back.
if you agree to show all the pictures, with blanks up and down or left and right, you can also do the same as below.
.parent{
width:200px;
height:200px;
position:relative;
}
.child{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
question 2: list item container padding:5px;box-sizing:border-box;display:inline-block , list container gives white space on both sides, set font-size:0; to prevent the gap between items, do not need to use flex .
//css
.box {
width: 500px;
}
.img-box {
width: 33.33%;
height: 0;
padding-bottom: 33.3%;
box-sizing: border-box;
float: left;
border-right: 10px solid -sharpffffff;
margin-bottom: 10px;
background: -sharp000 no-repeat center center;
background-size: contain;
}
.img-box:nth-child(3n) {
border-right: none;
}
//html
<div class="box">
<div class="img-box" style="background-image: url(http://pic1.win4000.com/wallpaper/5/532931489604e.jpg)"></div>
<div class="img-box" style="background-image: url(http://img.zcool.cn/community/0108185543f09e0000019ae906d8f6.jpg@1280w_1l_2o_100sh.jpg)"></div>
<div class="img-box" style="background-image: url(http://img.zcool.cn/community/01626057ff29a1a84a0d304f3b5991.jpg@1280w_1l_2o_100sh.jpg)"></div>
<div class="img-box" style="background-image: url(http://pic1.win4000.com/wallpaper/5/532931489604e.jpg)"></div>
<div class="img-box" style="background-image: url(http://img.zcool.cn/community/0108185543f09e0000019ae906d8f6.jpg@1280w_1l_2o_100sh.jpg)"></div>
<div class="img-box" style="background-image: url(http://img.zcool.cn/community/01626057ff29a1a84a0d304f3b5991.jpg@1280w_1l_2o_100sh.jpg)"></div>
</div>
question 1: your current situation is that the height is fixed and the width is uncertain. To ensure that the picture is displayed in the proportion of the original image, use js to obtain the original width and height of the picture, and then calculate the width to be displayed according to the original width and height, as follows:
var img = new Image ()
img.src = "url.png";
var naturalWidth = img.naturalWidth,
naturalHeight= img.naturalHeight;
/ / if the width of the picture to be displayed is showHeight, the width of the picture to be displayed is as follows
var showWidth = (showHeight / naturalHeight) * showHeight
problem 2: when it is impossible to guarantee the consistent aspect ratio of the picture uploaded by the user, only the top width or fixed height can be guaranteed. Flex
is recommended for this layout.
see that your problem should mainly be stuck on the equal width and height of this picture. Here is a solution: use padding-bottom/top to get width .
handle height with :: after , open the container, :: before render the actual content
at the same time, the outer container uses margin:-$gap$ / 2 to remove the surrounding gaps
Online Demo: https://codepen.io/Jiasm/pen/.
is a background-color simulation. If you want to use a picture, write it as background-url + background-size: .
.wrap {
border: 1px solid blue;
width: 400px;
}
.border {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin: -5px; /* fill panel */
}
.item {
width: 33.33%;
position: relative;
}
.item::before {
display: block;
content: '';
width: 100%;
padding-top: 100%;
}
.item::after {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background: red;
}
