在 html 代码中加载图像答案

【问题标题】：Load image in html code在 html 代码中加载图像
【发布时间】：2016-10-13 01:04:21
【问题描述】：

我找到了这个 html 代码，我想修改它以将图像加载到 html 代码中：

<section class="bg-img well-top">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-offset-2 col-sm-8">
                <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8">
                    <label class="search-form_label">
                        <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/>
                        <span class="search-form_liveout"></span>
                    </label>
                    <button class="search-form_submit fa-search" type="submit"></button>
                </form>
            </div>
        </div>
    </div>
</section>

CSS 代码：

.bg-img {
  background: no-repeat url(../images/bg-img.jpg);
  background-size: cover;
  padding-top: 90px;
  padding-bottom: 133px;
  text-align: center; }
  @media (max-width: 767px) {
    .bg-img {
      padding-top: 70px;
      padding-bottom: 80px; } }

我想将图像文件加载到 html 代码中。

【问题讨论】：

您可以使用 canvas 和 javascript 将图像加载到 html5 中。示例here
我可以使用html标签吗？
你的意思是<img> ...？
我想获得相同的视觉效果，但使用 html 代码加载图像。
@CBroe 是的，但我怎样才能获得相同的视觉效果？

标签： css html

【解决方案1】：

有一个相对较新的 css 属性可以做你想做的事，object-fit。它有相当不错的support（微软除外 - pollyfill）。

将图像放入 html 相当容易，只需在容器中绝对定位 img，.bg-img，以占用相同的空间并应用 object-fit: cover。只要确保您调整图像的z-index（因此它不会覆盖您的表单）并且.bg-img（从技术上讲不再是一个非常好的类名）具有position: relative，以便您的图像使用它来定位.

img {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

.bg-img {
    position: relative;
    padding-top: 90px;
    padding-bottom: 133px;
    text-align: center; 
    overflow: hidden;
}

@media (max-width: 767px) {
    .bg-img {
        padding-top: 70px;
        padding-bottom: 80px; 
    }
}

<section class="bg-img well-top">
    <img src="https://placebear.com/1200/300" alt="place bear" />
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-offset-2 col-sm-8">
                <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8">
                    <label class="search-form_label">
                        <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/>
                        <span class="search-form_liveout"></span>
                    </label>
                    <button class="search-form_submit fa-search" type="submit"></button>
                </form>
            </div>
        </div>
    </div>
</section>

我不知道你的其他样式是什么，如果它看起来和你想要的完全一样，但如果我理解你的问题，它应该很接近。

【讨论】：

【解决方案2】：

我的第一个问题是为什么？您是只想在 HTML 中加载图像代码并计划保留 CSS 的其余部分不变，还是希望替换/删除所有 CSS 代码？

如果您希望替换所有 CSS 代码并拥有仅 HTML 的解决方案，则很难获得与您找到的代码相同的视觉结果，因为该 CSS 中有很多样式。

最简单的答案是使用 style 属性将背景图片移动到 HTML 文件中：

<section class="bg-img well-top" style="background-image: url(../images/bg-img.jpg);">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-2 col-sm-8">
            <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8">
                <label class="search-form_label">
                    <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/>
                    <span class="search-form_liveout"></span>
                </label>
                <button class="search-form_submit fa-search" type="submit"></button>
            </form>
        </div>
    </div>
</div>

并更新您的 CSS 以删除图像引用：

.bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 90px;
  padding-bottom: 133px;
  text-align: center; 
}
@media (max-width: 767px) {
  .bg-img {
     padding-top: 70px;
     padding-bottom: 80px; 
  } 
}

【讨论】：

【解决方案3】：

你试过了吗？

<section class="bg-img well-top" style="background: no-repeat url(../images/bg-img.jpg); background-size: cover;">
(...)

使用DataURI，您可以将图像存储为 html 代码中的 base64 编码字符串。但是 URI 会增加大约 30% 的图像大小。

背景内的Base64图片内容：url属性示例：

<section class="bg-img well-top" style="background: no-repeat url(data:image/jpeg;base64,/9j/4AAQSk....base64.img.content...//2Q==); background-size: cover;">
(...)

【讨论】：

【解决方案4】：

请说明您的观点，以便我为此安排一个完美的解决方案，好的，我们有两种方法：

使用 css 的背景图片使用任何类或 id 或特定元素，您可以通过背景图像来完成，例如：

.image-class, #image-id{
background:url(some_url);
height: it depends on container content otherwise write it here in px
}

另一种带有img标签和使用js的特定id或类的方法：

document.getElementbyID("image-id").innerHTML="<img src="image-url">";

如果 innerHTML 对您造成问题，您可以使用 jquery 中的某些其他方法，例如追加等。

如果您有任何其他问题，请告诉我

【讨论】：

【解决方案5】：

使用img src="filename.png" width="900" height="1200" style="border-radius: 20px;" 等。您也可以根据需要设置宽度、高度和样式。在此之前，将要加载的图像设置为 png 或 jpg 格式。要使图像居中，请使用命令 <centre> </centre>

【讨论】：