用单个图像替换背景图像并获得相同的效果

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