将背景图片替换为单张图片，效果相同

Question

我曾经使用background-image将图像缩放为列的大小，但当我意识到背景图像不允许使用alt标记时，我需要将其更改为img标记，

使用background-image

     <div style=" background-image: url('test.jpg'); " class=" img-chess wpb_column column_container vc_column_container col no-extra-padding instance-3" data-using-bg="true" data-shadow="none" data-border-radius="none" data-border-animation=""data-border-animation-delay="" data-border-width="none" 
data-border-style="solid" data-border-color="" 
data-bg-cover="true" data-padding-pos="all" data-has-bg-color="false" 
data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
        <div class="vc_column-inner">
        <div class="wpb_wrapper">   
    <div class="wpb_raw_code wpb_content_element wpb_raw_html">
        <div class="wpb_wrapper">
        </div></div></div> </div></div>

.full-width-content.vc_row-fluid .wpb_column {
    background-position: center;
    background-size: cover;
    -moz-background-size: cover
}

如何使用img标签执行上述操作？有什么简单的方法可以使用css和html来实现这一点吗？

谢谢

Answer 1

您可以创建一个包装器，然后将您的内容和图像放在该包装器中。然后，您可以使图像绝对定位在该内容中，然后将其放置在您想要的任何位置。您只需使父对象处于相对位置，它就会起作用。下面是一个示例：

https://jsfiddle.net/u2xnwfct/

​

div {
  position: relative;
}

h1 {
  padding-left: 30px;
}

img {
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  /*below 2 lines will make sure it stays centered regardless of the height of the parent.*/
  top: 50%;
  transform: translate(0, -50%);
}

<div class="wrapper">
    <h1>This is my title</h1>
    <img src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" alt="My Image"/>
</div>

​

Answer 2

抱歉，我的问题可能不是很清楚，但如果有人读到这篇文章，想知道正确的答案是什么，

.img-class{
height:100px or whatever the amount you need here //in my case this is the padding used for the column
object-fit:cover;
object-position:center center;
}

这个视频帮助我https://www.youtube.com/watch?v=kmVrFwkI9Fw