Question

我正在创建一个2列的布局页面，遇到了一个问题需要花费数小时思考但失败了。

我想加载具有固定背景的图像 - 这样用户在加载图像时不会错误地点击链接（您是否经历过类似的事情 - 当您点击链接，图像显示和目标时你的鼠标点被改变，然后你得到另一个错误的链接点击）。并且base64图像会使外观看起来比一些#ccc框更好。

为了更好地解释，我上传了一张图片：

代码是：

＆＃13;

.wrapper {
  text-align:center;margin:30px auto 0;width:410px;
  background:#ffe;
}
.wrapper a {width:49%;display:inline-block;margin:1px}
a {display:inline-block}
b {display:block}

.wrapper-desired-look a img {
  width:100%;
  height:105px;
  /* wrapper is 410px 
     and 49% of 410 is 201px
     and according to the image ratio, the height is 201*230/440 = 105px
     it can be done via JavaScript but I want to keep it pure CSS way.
  */
}

/* 440 x 230*/
.wrapper a img {
  background:url("data:image/png;base64,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");
  background-size:contain;
}

＆＃13;

<h2>
The look without fixed width and height
</h2>
<div class="wrapper">
<a>
  <img src="" alt=" How do I keep the ratio of the pre-set base64 background image? " />
  <b>Title 1</b>
</a>
<a>
  <img src="" alt="And let it resized to the desired width" />
  <b>Title 2</b>
</a>
<a>
  <img src="" alt="with pure CSS?" />
  <b>Title 3</b>
</a>
</div>


<h2>
The desired look
</h2>
<div class="wrapper-desired-look wrapper">
<a>
  <img src="" alt=" This look is what I expected " />
  <b>Title 1</b>
</a>
<a>
  <img src="" alt=" But I need to pre-set the width and height " />
  <b>Title 2</b>
</a>
<a>
  <img src="" alt=" property in the CSS" />
  <b>Title 3</b>
</a>
</div>

＆＃13;

我可以在没有CSS的情况下获得所需的外观吗？

如果我必须使用JavaScript，有没有推荐的方法呢？

Answer 1

为了使<img>代码具有正确的比率，您需要将其加载到src属性中（如果您只将其设置为background-image，它将无法运行所以我将background-image移到了容器（<a>）并将<img>作为不可见的响应元素放置，因此它在父级上设置了正确的比例。结果就是你要求的。请请注意，浏览器仅为所有匹配项加载图像一次（src和background-image）。

＆＃13;

$(window).on('load', function(){
  $('.wrapper>a').each(function(){
    imagePath = $(this).css('background-image').replace('url("', '').replace('")','');
    if (imagePath.length > 0) {
      img = $('<img />', {
        class:'hidden',
        src:imagePath
      });
      $(this).prepend(img);
    }
  })
})

＆＃13;

.wrapper {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

body {
  padding: 0;
  margin: 0;
}
.wrapper > a >img {
  visibility: hidden;
  z-index: -1;
  position: relative;
  width: 100%;
  height: auto;
  float: left;
}
.wrapper > a > h4 {
  position: absolute;
  bottom: -4rem;
  text-align: center;
  width: 100%;
}
.wrapper > a > .visible-content {
  width: 100%;
  position: absolute;
  font-size: 1.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wrapper > a {
  margin: 1rem 1rem 4rem;
  width: calc(50% - 2rem);
  display: block;
  position: relative;
  background:url("data:image/png;base64,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") no-repeat 50% 50% /cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a>
    <div class="visible-content">
      How do I keep the ratio of the pre-set base64 background image?
    </div>
    <h4>Title 1</h4>
  </a>
  <a>
    <div class="visible-content">
      And let it resized to the desired width
    </div>
    <h4>Title 2</h4>
  </a>
  <a>
    <div class="visible-content">
      with pure CSS?
    </div>
    <h4>Title 2</h4>
  </a>
</div>

＆＃13;

如何根据base64编码的背景数据比率为<img/>设置宽度和高度？

1 个答案: