在 html 页面上使用图像时，图像的某些部分变得不可见答案

【问题标题】：some part of the image becoming invisible while using it on html page在 html 页面上使用图像时，图像的某些部分变得不可见
【发布时间】：2021-12-05 05:05:17
【问题描述】：

我说的是这个 HTML 页面上link 第二部分中的图像。这是原始图像的link。

当您检查您可以看到的 HTML 页面时，我使用的是与给定链接相同的图像，但图像中的手仍然没有显示，我尝试调整大小并检查所有内容，以便手图像变得可见但不起作用。我以为是 z-index 的问题，但我检查了一切 z-index 都很好，手的边框部分是可见的。

我刚刚在不同的 Mac 和 safari 浏览器中看到图像是用手显示的，但在我的系统、Linux 和 chrome 浏览器中，图像是在没有手的情况下显示的。

<div class="col-lg-4  is-animated">
                        
                            <img src="assets/images/2sec.svg" class="img-fluid" alt="">
                        
                    </div>

【问题讨论】：

你设置了cssobject-fit属性吗？
@Bryce 是的，尝试过，没有任何反应，您也可以通过转到链接并使用检查来尝试。

标签： javascript html css image

【解决方案1】：

更改内联样式样式 margin-left 值。

<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="assets/images/2sec.svg" name="imgbox" id="imgbox" style="margin-left: 256px;">

还有 svg width="100%" 和 height="auto"

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox="0 0 540 471" fill="none">

【讨论】：

【解决方案2】：

@Progu，感谢您的回答，您的回答有效，但我的 javascript 代码开始遇到另一个问题，当我使用对象标签显示图像时，滚动停止工作......

所以我搜索了除图像标签之外的更多显示图像的替代方法，我发现了 Iframe 方法，它非常有效。但是，如果有人知道为什么会发生这种情况并且可以使用图像标签显示它可以回答。

 <iframe frameborder="0" scrolling="no" width="100%" height="100%"
   src="assets/images/2sec.svg" name="imgbox" id="imgbox">
   <p>iframes are not supported by your browser.</p>
</iframe><br />

【讨论】：

【解决方案3】：

尝试使用<object>标签：

&lt;object type="image/svg+xml" data="https://www.thealphateam.digital/demos/pando/assets/images/2sec.svg"&gt;

【讨论】：

好的，我现在就试试...谢谢兄弟，它现在可以工作了...您能否详细说明为什么它不能与图像标签一起正常工作，但与对象标签一起工作...
当我看到它在 safari 上运行时，我认为这是与浏览器相关的问题。
这种替代方法有效，图像在所有浏览器上都正确可见。我也看到了它是什么对象，但是要嵌入图片，最好使用标签。使用对象标签后，我面临一个不同的错误，滚动不起作用，我使用 javascript 进行基于部分的滚动。当我使用对象时进入第二部分后，它不会滚动到第 3 部分
svg嵌入了另一个图像（手），当使用img标签时，由于潜在的安全问题，Chrome拒绝加载它，另一个打开svg文件的选项复制整个@987654324 @ 进入你的 html 页面。