我想调整CSS背景图片的大小（不保持宽高比），然后然后将background-size: contain应用于同一张图片。否则，将在某种程度上抵消contain选项的影响。
这可以用HTML / CSS完成吗，还是有必要将Javascript引入其中？在我的用例中，无法手动编辑图像。
http://jsfiddle.net/h5a2nxfd/68/
我想显示一些图片，这些图片的纵横比更改为左右或上下，具体取决于是否启用了横向或纵向模式。上面的JSFiddle缺少大小更改。
我尝试使用transform来应用缩放，但是在当前解决方案中div.item的宽度/高度是可变的，因此不太可行。
我愿意接受您的建议。我可能正在尝试从错误的角度解决这个问题。但我宁愿不使用Javascript。
编辑：在JSFiddle中使用的示例SVG图像中添加了圆圈。
答案 0 :(得分：0)
如果您可以使用HTML和CSS解决方案，而不仅仅是纯粹的CSS解决方案，则可以通过将图片嵌套在div中来进行以下操作，从而使弹性项目尺寸设置样式和图像尺寸设置样式更多地分开有效。您可以在flex项目上设置样式，以确定.image将包含在其中的框的大小，和/或在.image本身上设置宽度和高度以歪曲{图片。请注意，为了更灵敏地执行此操作，而不是在容器上设置固定的宽度和高度，我为.image创建了fixed-aspect-ratio个容器。您可以根据需要更改纵横比。我还使用img代替了背景图片的div，这使您可以更好地控制纵横比（即与div相比， height: auto;上的width和img将导致保留宽高比，width: auto;和显式高度也将得到保留，当您的布局从基于行的flexbox布局切换时，这很有用到基于列的）。
使用img标签而不是背景图像的div可以带来的另一个潜在好处是使用object-fit: contain;属性（如果需要图像可以使用object-fit: scale-down;只能将其缩小，而永远不会放大），而不是将图像的宽度和高度设置为容器的100％（限制为适当的宽高比），或者在background-size: contain;上使用div和背景图像。有关object-fit的参考，请参见MDN，包括浏览器支持信息。
这是一个工作代码段，其中img标签位于长宽比框中，并且其长宽比并未作为问题请求而保留：
document.body.addEventListener("click", function() {
document.body.classList.toggle("portrait");
});html,
body {
height: 100%;
}
.container {
height: auto;/*you had this as 100%. If you are going to constrain the height of your container, then you need to constrain the height of the items too to make sure they still fit inside, ie put max-height: 50%; on the items inside the container.*/
width: 100%;
display: flex;
flex-flow: row wrap;
/*align-items: stretch;*//*align-items: stretch; will cause potential problems with your layout if you intend for there to be more than 1 item per row/column*/
}
/*body.portrait .container {
flex-direction: column;
}*/
.item {
/*flex-grow: 1;*//*flex-grow: 1; will likewise cause potential problems with your layout if you intend for there to be more than 1 item per row/column*/
width: 50%;/*can use width auto with images that have an intrinsic width to let image size determine width, or can set an explicit width as I have done here (for 1 image per row 100%, for 2 images per row 50%, etc)*/
}
.aspect-ratio-box-outer {
position: relative;
width: 100%;
height: 0;
padding: 0 0 75%;
margin: 0;
}
.aspect-ratio-box-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.item .image {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
body.portrait .aspect-ratio-box-outer {
padding: 0 0 133.33333%;
}
/* The images are inline SVG for demonstration purposes only */
/*.item.first {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'><rect width='100%' height='100%' style='fill: red' /><circle cx='50%' cy='50%' r='150' style='fill: black' /></svg>");
}*/
/*.item.second {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'><rect width='100%' height='100%' style='fill: blue' /><circle cx='50%' cy='50%' r='150' style='fill: black' /></svg>");
}*/<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Stackoverflow question</title>
</head>
<body>
<p>
Click to toggle between landscape and portrait mode.
</p>
<div class="container">
<div class="item first">
<div class="aspect-ratio-box-outer">
<div class="aspect-ratio-box-inner">
<!--<div class="image"></div>-->
<img class="image" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'><rect width='100%' height='100%' style='fill: red' /><circle cx='50%' cy='50%' r='150' style='fill: black' /></svg>" alt="" />
</div>
</div>
</div>
<div class="item second">
<div class="aspect-ratio-box-outer">
<div class="aspect-ratio-box-inner">
<!--<div class="image"></div>-->
<img class="image" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'><rect width='100%' height='100%' style='fill: blue' /><circle cx='50%' cy='50%' r='150' style='fill: black' /></svg>" alt="" />
</div>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：-1)
我不知道您到底想达到什么目的，请尝试将背景尺寸设置为100％，而不是包含