设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › HTML中如何将图片在框架中自适应，并将框架居中
返回列表 发新帖
查看: 4138|回复: 3

[已解决]HTML中如何将图片在框架中自适应，并将框架居中

[复制链接]
我在这呢
发表于 2020-4-10 08:11:53 | 显示全部楼层 |阅读模式
2鱼币
问题大致就是这样的，希望大佬们能帮我解答，鱼币不多，我也是刚来这个网站的，还望能多多帮忙，谢谢啦，在线等。
最佳答案
月排行榜 / 总排行榜
不二如是
2020-4-10 08:11:54
1、将 img 放到一个 div 元素中，部分代码：
  1. <style>
  2. .tst{
  3. width:500px;
  4. height:400px;
  5. display:flex;
  6. align-items:center;
  7. justify-content:center;
  8.                         /*为了效果明显，可以将如下边框打开，看一下效果*/
  9.                         /* border:1px solid black; */
  10. }

  12. .tst img{
  13.         width:100%;
  14.         height:auto;
  15. }

  17. </style>
  18. </head>
  19. <body>
  20.         <div class="tst">
  21.                 <img src="1.png"/>
  22.         </div>
  23. </body>
复制代码
批注 2020-04-10 081002.png

最佳答案

不二如是

查看完整内容

1、将 img 放到一个 div 元素中，部分代码：
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2020-4-10 08:11:54 | 显示全部楼层    本楼为最佳答案   
1、将 img 放到一个 div 元素中，部分代码：
  1. <style>
  2. .tst{
  3. width:500px;
  4. height:400px;
  5. display:flex;
  6. align-items:center;
  7. justify-content:center;
  8.                         /*为了效果明显，可以将如下边框打开，看一下效果*/
  9.                         /* border:1px solid black; */
  10. }

  12. .tst img{
  13.         width:100%;
  14.         height:auto;
  15. }

  17. </style>
  18. </head>
  19. <body>
  20.         <div class="tst">
  21.                 <img src="1.png"/>
  22.         </div>
  23. </body>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

我在这呢
 楼主| 发表于 2020-4-10 08:39:15 | 显示全部楼层
不二如是 发表于 2020-4-10 08:11
1、将 img 放到一个 div 元素中，部分代码：

可以，，，谢谢大佬
爱你，嘿嘿
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

我在这呢
 楼主| 发表于 2020-4-10 08:56:51 | 显示全部楼层
我在这呢 发表于 2020-4-10 08:39
可以，，，谢谢大佬
爱你，嘿嘿

大佬，这个自适应还是没有实现哎
可以私聊，耽搁您一会，可以吗
想学
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-18 05:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表