Question

如果不使用JS，如何与任何图像（大小不一，任意大小比例）和任何容器大小（但都是固定的）一起实现这些效果。

图像相对于容器水平和垂直居中
保留图像宽高比
如果图像宽度/高度大于容器的宽度/高度，则图像高度为容器的100％，并且图像按宽度裁剪。如果图像的宽度/高度小于容器的宽度/高度，则图像宽度为容器的100％，图像按高度裁剪。

我知道使用背景图片的解决方案。请仅提供<img>

Answer 1

它很简单：

var json = {
    "data": [{
        "prop": "prop1",
        "template": "template1",
        "group": [{
            "group_name": "Group 1",


        }, {
            "group_name": "Group 2",


        }, {
            "group_name": "Group 3",


        }]
    }]
};

json.data[0].group.forEach(function(d){ 
  if(d.group_name=="Group 1") 
    d.group_no = 10; 
  else if(d.group_name=="Group 2") 
    d.group_no = 11; 
  else 
    d.group_no = 12; 
});

alert(JSON.stringify(json));

显然这仅适用于背景图像，对于您可能想要查看CSS3 flexbox的实际图像元素。

Answer 2

您可以将它包装在这样的容器中，并使用min值控制其大小，但如果您的屏幕小于图像宽度，它只会在任何地方裁剪。

img {
    position: absolute;
    left: 0;
    left: calc(50%);
    top: 0;
    top: calc(50%);
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
}

您可以添加媒体查询来解决尺寸问题：

@media all and (orientation:landscape){
    width: 100vmax;
    min-width: 0; min-height: 0;
}
@media all and (orientation:portrait){
    height: 100vmax;
    min-width: 0; min-height: 0;
}

但是，easer可能是background-size：cover属性并将其指定为背景：

<div style="background-image: url(url/to/image.ext);"></div>
div {
    background-size: cover;
    background-position: 50% 50%;
}

Answer 3

我之前尝试过多个项目，我能得到的最好的事情是选择首选维度，冒险另一个。我无法让它适应两种情况，裁剪只能在一个方面进行。这是一个例子（如果太大，高度将被裁剪，但宽度将始终为100％）。我有兴趣找到解决方法。

.container {
 overflow: hidden;
 width: 400px;
 height: 300px;
 position:relative
}

img {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto; /* this centers image inside */
 width: 100%; /* this is to shrink the images of large width */
}

是否可以在没有javascript的情况下纵向裁剪并将图像垂直和水平放到容器中？

3 个答案: