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

Question

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

使用背景图像

     <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

您可以创建一个包装器，然后将您的内容和图像放在该包装器中。然后，您可以使图像绝对定位在该内容中，然后将其放置在您想要的任何位置。你只需要让 parent 相对定位，它就会起作用。这是一个例子:

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>