如何在div中添加图片web的具体方法

美术设计 · 发表于昨天 18:49

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

在div中添加图片的常用方法有：使用html标签、CSS背景图片、使用JavaScript动态添加。其中，使用HTML标签是最简单直观的方法，适合大多数情况。CSS背景图片则在需要背景图像时非常有用，而JavaScript动态添加则提供了更大的灵活性，可以根据用户行为或数据动态更新图片。下面我们将详细展开这些方法及其应用场景。

一、使用HTML标签
使用HTML标签添加图片是最常见的方法。你只需要在<div>标签内部嵌入一个<img>标签即可。这种方法简单直接，非常适合静态内容。

1.1、基本用法

<div>
<img src="image.jpg" alt="描述图片的文字">
</div>

复制代码

在这个例子中，src属性指定了图片的路径，而alt属性提供了图片的替代文字，用于在图片无法加载时显示，也对seo友好。

1.2、调整图片大小
为了让图片适应容器大小，可以使用CSS来调整图片的宽度和高度。例如：

<div class="image-container">
<img src="image.jpg" alt="描述图片的文字">
</div>
<style>
.image-container img {
width: 100%;
height: auto;
}
</style>

复制代码

<div class="background-image"></div>
<style>
.background-image {
background-image: url('image.jpg');
width: 300px;
height: 200px;
}
</style>

复制代码

<div class="background-image"></div>
<style>
.background-image {
background-image: url('image.jpg');
background-size: cover; /* 使背景图片覆盖整个容器 */
background-position: center; /* 将背景图片居中对齐 */
background-repeat: no-repeat; /* 防止背景图片重复 */
width: 300px;
height: 200px;
}
</style>

复制代码

<div id="image-container"></div>
<button onclick="addImage()">加载图片</button>
<script>
function addImage() {
var img = document.createElement('img');
img.src = 'image.jpg';
img.alt = '描述图片的文字';
document.getElementById('image-container').appendChild(img);
}
</script>

复制代码

<div id="image-container"></div>
<button onclick="loadImage()">加载图片</button>
<script>
async function loadImage() {
try {
let response = await fetch('https://api.example.com/get-image');
let data = await response.json();
let img = document.createElement('img');
img.src = data.imageUrl;
img.alt = data.imageDescription;
document.getElementById('image-container').appendChild(img);
} catch (error) {
console.error('Error loading image:', error);
}
}
</script>

复制代码

<div class="image-container">
<img src="image.jpg" alt="描述图片的文字">
</div>
<style>
.image-container {
background-image: url('background.jpg');
background-size: cover;
width: 300px;
height: 200px;
}
.image-container img {
width: 100%;
height: auto;
}
</style>

复制代码

<div id="image-container"></div>
<button onclick="addBackgroundImage()">加载背景图片</button>
<script>
function addBackgroundImage() {
var div = document.getElementById('image-container');
div.style.backgroundImage = 'url(background.jpg)';
div.style.width = '300px';
div.style.height = '200px';
div.style.backgroundSize = 'cover';
}
</script>

复制代码

<div class="image-container">
<img class="lazy" data-src="image.jpg" alt="描述图片的文字">
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for older browsers
let lazyLoadThrottleTimeout;
function lazyLoad() {
if (lazyLoadThrottleTimeout) {
clearTimeout(lazyLoadThrottleTimeout);
}
lazyLoadThrottleTimeout = setTimeout(function() {
let scrollTop = window.pageYOffset;
lazyImages.forEach(function(img) {
if (img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if (lazyImages.length == 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}, 20);
}
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
}
});
</script>

复制代码

<style>
.image-container img {
width: 100%;
height: auto;
}
@media (min-width: 768px) {
.image-container img {
width: 50%;
}
}
</style>

复制代码

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！