Html 复制背景样式：是否包含在img上？

请注意，我需要从html声明img源代码（这将是动态的），所以这里不使用后台

HTML

<div class='some-form'>
  <form>
    <button>...<button>
    <img id="some-img" src="something"/>
    <input id="some-input"/>
  </form>
</div>

---

如何让图像表现得像contain一样，以便按照我想要的方式对齐它？

如果包含jquery，可以编写一个脚本来欺骗它：

<script type="text/javascript">
  height = $('#some-img').height();
  width = $('#some-img').width();
  src = $('#some-img').attr('src');
  $('#sime-img').wrap('<div id="contain"></div>');
  $('#contain').height(height).width(width);
  $('#contain').css('background',"url('" + src + "')");
  $('#contain').css('background-sizing','contain');
  $('#some-img').css('opacity','0');
</script>

高度=$（'#一些img'）。高度（）；
宽度=$（'#一些img'）。宽度（）；
src=$（'#一些img'）.attr（'src'）；
$（“#sime img”）.wrap（“”）；
$（“#包含”）。高度（高度）。宽度（宽度）；
$（'#contain'）.css（'background'，'url（'“+src+”））；
$（'#contain'）.css（'background-size'，'contain'）；
$（'#一些img'）.css（'opacity'，'0'）；

---

这不好。不使用JQuery也可以做同样的事情，我只是为了方便而使用它。

如果我理解正确，您希望将图像约束到其包含元素的大小，并将其垂直和水平居中

这会让你非常接近，但图像只会放大到它的实际大小，不会更大

HTML

小提琴：

---

祝你好运

保持代码不变，但将

#一些img

从

img

更改为

div

（并根据图像尺寸指定所需的宽度和高度）。由于

img

元素不是背景，因此不可能（至少不以简单的方式）使

img

元素的行为如同使用

background size

和

background position

属性一样。因此，为了做到这一点，您将图像设为

div

，背景图像设为

由于您正在动态填充图像
src
，因此可以使用内联样式在
div
上定义
背景图像，因为这样可以调用PHP或其他服务器端函数来回显图像url（在CSS文件中无法执行此操作）

因此，例如，保留您现在拥有的CSS（但根据需要将高度/宽度或其他样式添加到
#一些img
div
），但将
替换为以下内容：

您应该仍然能够在html中动态声明背景图像，这可能是内联css可以接受的用例。
img
元素不能用作背景。将
img
更改为
div
并在代码中内联
background image
属性会更容易，因此您可以使用PHP或其他工具输出它。从代码质量的角度来看，它可能并不完美，但这是目前为止最简单的解决方案。我不清楚您想要实现什么。是否只是希望图像与容器一样宽，但向左移动50像素？如果是这样，将右边距设置为50px，宽度设置为100%有什么不对？不，您只需要内联背景图像；其他一切都可以在你想去的任何地方to@shawn正如VAL所说，不，只内联您绝对必须的内容，因为在大多数情况下使用内联css是不好的做法。在这种情况下，唯一需要内联的是
背景图像
，因为我认为您是在使用服务器端代码来定义它的，该代码在页面请求时呈现（即PHP）
<script type="text/javascript">
  height = $('#some-img').height();
  width = $('#some-img').width();
  src = $('#some-img').attr('src');
  $('#sime-img').wrap('<div id="contain"></div>');
  $('#contain').height(height).width(width);
  $('#contain').css('background',"url('" + src + "')");
  $('#contain').css('background-sizing','contain');
  $('#some-img').css('opacity','0');
</script>

<div class='some-form'>
  <form>
      <button></button>
        <img id="some-img" src="http://lorempixel.com/300/200/sports"/>
      <input id="some-input" />
  </form>
</div>

.some-form { 
    display: block; 
    position: relative; 
    width:400px;
    height:180px;
    background: rgba(255,255,0,.1); /* for checking that it fits*/
}
.some-form #some-input { 
    background-color: rgba(255,255,255,0); 
    border: 1px solid #2F2F2F; 
    width: 300px; 
    color: #000; 
    opacity: 1; 
}
.some-form #some-img { 
    position:absolute;
    background-color: #FFF; 
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto auto;
    max-width:100%;
    max-height:100%;
    z-index: -1;
}