web前端怎么让div大小刚好和图片一样大

Posted 2023-04-23

web前端怎么让div大小刚好和图片一样大<div> <img...> </div>
一个div容器包含一个img图片，怎么让div容器的大小刚好和img图片大小相同

在前端开发过程中，我们经常会遇到盒子大小跟图片尺寸不匹配的情况，我们通常会通过以下几种方式来解决。
1.通过采用裁剪图片，根据div盒子设置的宽、高，来更改裁剪图片的尺寸，使图片适配div盒子。
2.设置div的具体宽高，图片宽高分别设置为100%，代码具体如下width:100%;height:100%。这种方式，也可以将图片大小填充满盒子。
3.如果图片是网页背景图片，还可以通过设置div盒子内属性background-size为cover，这种方式也可使图片充满盒子。
我们在实际运用中，可以根据不同情况来选择不同图片调整方式。 参考技术A 设置div的具体宽高，img设置为width:100%;height:100%;图片就会把div填充满追问

如果div的宽高比img小呢

追答

那也没事，img会根据div的宽高自己变化

追问

不会使图片像素变不清晰吗

实际开发中也这么用吗。

追答

实际开发中会这样使用，但div和img不会相差太多的

追问

我是想做一个相册的功能，点击图片缩略图就将图片放大，大小就是图片本身大小。可能会有不同尺寸图片。这么做用你说的方法可以实现吗

追答

我说的只是把图片充满div，而你现在说的是一个功能的实现，这两者没有什么太多联系的

追问

不过你说的这个就是我要实现功能中的一点。谢谢回答

本回答被提问者采纳

dreamweaver 背景图片怎么自适应浏览器大小

背景图片太大超出浏览器了,怎么让它自适应浏览器大小?
background-image: url(%E6%9C%80%E7%BE%8E%E7%9A%84%E5%85%83%E7%B4%A0%E5%91%A8%E6%9C%9F%E8%A1%A8.jpg

这窜代码应该加什么?

图片自适应屏幕大小显示主要是利用百分比来控制，切忌给图片宽度一个固定值。如下代码：
html代码:

<div class="imgbox">
<img src="图片地址" alt="">
</div>

此时的css可以写成:

.imgbox imgwidth:100%;

这样，图片的大小就会根据其父级容器的大小而变化，图片的宽度只设置百分比，这样可以根据浏览器窗口的大小变化而随时调整。

参考技术A 不是图片去适应浏览器 而是每个浏览器对像素的解析程度不同，加上有时桌面的分辨率也会造成乱码 解决的方法就是把像素换成百分比 50一下的单位可以是px 50以上的单位最好用百分比来表示最好 参考技术B 除了楼上两个的回答外，你可以试着把图片压缩到普通浏览器都能适应的大小，不要太大的都可以来自：求助得到的回答 参考技术B 可以的，但纯CSS是不能的，要用脚本配合，且背景图片要很大！本回答被提问者采纳 参考技术C 纯CSS 可能不可以， 你可以把背景图片做的大一些，或者找找相应的js