如何让img自适应div容器大小

最新推荐文章于 2024-09-20 11:20:30 发布

qq_50630857

最新推荐文章于 2024-09-20 11:20:30 发布

阅读量573

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_50630857/article/details/129255151

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过CSS的max-width设置为100%和height:auto，可以让img根据div容器自动调整大小。另外，使用background-size属性，如background-size:100%100%，也可以使背景图片充满整个div容器，达到自适应的效果。

摘要由CSDN通过智能技术生成

如何让img自适应div容器大小

1、使用css中的max-width 和 height：auto

2、使用css中的background-size

.container{
     width: 300px;
     height: 200px;
     background: url(./imgs/1.jpg) no-repeat;
     background-size: 100% 100%;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_50630857

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css让图片自适应容器（div）大小并居中显示

小柠檬爱编程

05-12

3825

我们在写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。(因为此图片表示很难过…哎); <div> <img src="1.jpg" alt=""> </div> div { width: 400px; height: 400px;//对于图片的多变性,很多情况下不给固定高,让图片自适应,避免图片变形失真 border-radius: 5px; display:

img 固定在父容器底部_CSS将img图片填满父容器div并自适应容器大小

weixin_35743031的博客

01-13

1455

【前言】无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。例子：2021-01-10 21:27:45纯CSS实现的DIV悬浮效果(固定位置)，兼容常用的浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下：实...

参与评论您还未登录，请先登录后发表或查看评论

css图片垂直居中自适应

PromiseCao的博客

10-10

1万+

我们在应用图片的时候经常会碰到要让图片在容器里居中的情况，水平居中很简单直接给容器添加text-align: center;就ok了。那么垂直居中呢？是不是给img加vertical-align: middle;就可以了呢？答案显然是否定的，单纯的给img加vertical-align: middle;并不能行，我平时用的比较多的办法有两种。方法一： <style type="text/css">

DIV下图片自适应解决方法

SDTerminator的专栏

11-29

974

DIV下图片自适应解决方法div下图片自适应解决方法以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。关键在于：max-width:780px;以及下面那行。固定像素适应: 以下是引用片

让img里的图片自适应div，且不变形

最新发布

wangchaohpu的博客

09-20

226

【代码】让img里的图片自适应div，且不变形。

HTML如何让IMG自动适应DIV容器大小的实现方法

11-21

为了让IMG自适应大小，如下我做了一个横向自适应的示例： IMG样式（横向拉伸，纵向自动匹配大小） DIV样式（元素居中显示） IMG样式（横向拉伸，纵向自动匹配大小） width:100%; height:auto; （纵向拉伸，横向自动匹配大小） width:auto; height:100%; DIV样式（元素居中显示） display:flex; align-items:center; justify-content:center; 做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子： img{

html中怎么让img图片自适应div的大小

weixin_43112703的博客

02-26

2805

这样，图片就会根据父元素的大小进行自适应，保持宽高比例，而不会被拉伸变形。一、通过CSS技巧可以实现图片自适应<div>大小的效果。

img自适应div，无拉伸，无变形

weixin_41733299的博客

11-25

9991

img自适应div

CSS——img自适应div大小

aiyizou6070的博客

12-19

4006

代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>哈哈</title> <style> .div1 { ...

img与div容器自适应大小且不变形

qq_26889291的博客

01-28

1910

img与div容器自适应大小且不变形

纯js实现div内图片自适应大小(已测试，兼容火狐)

10-25

首先，我们要解决的问题是当图片的原始尺寸未知，且其所在的div容器尺寸也未知时，如何使图片自适应这个div。这个需求主要涉及到两个关键点：一是获取图片和div的尺寸，二是计算并调整图片的大小。 1. 获取图片和...

js解决div内图片自适应大小

01-23

纯js实现在img图片大小未知，div大小未知的情况下，让图片自适应大小,需要的朋友可以参考下已测试，兼容火狐，谷歌，IE6，IE7/8

img 图片自动适应div的方法

qq_31404277的博客

12-08

1万+

我们在写页面的时候经常会遇到需要图片自适应容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。 1.简单的做法 <div> <img src="1.jpg" alt=""> </div> 备注一下这里的图片大小为200x200px div { width: 400px; height: 400px; b...

CSS - 将img图片填满父容器div，自适应容器大小

qq_37131747的博客

12-06

2854

CSS - 将img图片填满父容器div，自适应容器大小

CSS: 如何让img里的图片自适应div，且不变形