目前,使用STYLE,我可以使用width: 100%和auto on height(反之亦然),但我仍然不能将图像约束到特定的位置,要么太宽,要么太高,分别。

什么好主意吗?


当前回答

简单的解决方案:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

顺便说一下,如果你想把它放在父div容器的居中,你可以添加这些css属性:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

它应该真的像预期的那样工作:)

其他回答

这是一个非常直接的解决方案,我提出后,conca的链接,并查看背景大小。它将图像放大,然后将其置于外部容器中,不缩放。

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

简单的解决方案:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

顺便说一下,如果你想把它放在父div容器的居中,你可以添加这些css属性:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

它应该真的像预期的那样工作:)

简单优雅的工作解决方案:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

也有同样的问题。对我来说,问题是高度属性也已经在其他地方定义,像这样固定它:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

我想这就是你要找的东西,我自己也在找,但在我找到密码之前我又想起来了。

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

数字进化正在进行中。