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

如果你包含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>

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

Answer 2

保持您的代码不变，但将#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"/>：< / p>

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

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

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

Answer 3

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

这会让你非常接近，但图像只会扩展到它的实际尺寸，不会更大。

HTML

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

CSS

.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;
}

小提琴：http://jsfiddle.net/XNR38/

祝你好运！

复制背景风格：包含在img上？

3 个答案: