html - 复制背景样式 :contain on img?

Question

请注意，我需要从 html 声明 img 源(这将是动态的)，所以我在这里不使用背景。

HTML

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

CSS

.some-form { 
  display: block; 
  position: relative; 
}
.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; 
  z-index: -1;
  //background-size: contain; //this does not work
  //background-position: center right 50px; //so this will not work
}

我怎样才能让图像像包含一样，以便我可以按照我想要的方式对齐它？

Answer 1

保持您的代码不变，但更改 #some-img来自 img到 div (并根据图像尺寸根据需要指定宽度和高度)。制作 img 是不可能的(至少不是以简单的方式)元素的行为就好像它在使用 background-size和 background-position自 img 以来的属性元素不是背景。因此，为了这样做，您改为将图像设为 div。用background-image .

因为您正在动态填充图像 src ，您可以改用内联样式来定义 background-image在 div 上，因为这允许您调用 PHP 或其他服务器端函数来回显图像 url(您不能在 CSS 文件中执行此操作)。

因此，例如，保留您现在拥有的 CSS(但根据需要将高度/宽度或其他样式添加到 #some-img div)但替换 <img id="some-img" src="something"/>像这样:

<div style="background-image: url(<?php theDynamicImageURL(); ?>);"></div>

或您用于动态填充图像的任何语言或方法的等效内容。

有更好的方法来做到这一点，因为内联 CSS 通常是应该避免的东西，但在这种情况下使用并不太危险，但它会在紧要关头工作，大多数其他方法要么同样草率，要么更多工作。