Question

我曾经使用background-image将图像缩放到一列大小，但是由于我意识到背景图像不允许alt标签，因此我需要将其更改为{{1} }标签

使用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 }标签执行上述操作？有没有简单的方法可以使用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

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

2 个答案: