开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >boostrap 里的media的图片为什么会看不见

boostrap 里的media的图片为什么会看不见

lilugirl

发布于 2019-05-26 13:13:08

发布于 2019-05-26 13:13:08

3320

举报

文章被收录于专栏：前端导学前端导学

可能的原因是多了这行img的设置，把这个设置去掉即可

img { /* make images responsive */ max-width: 100%; }

覆盖的代码

.media-left img{ max-width:none; }

原因是

media-left 是个table-cell元素，本身不带宽度的

如果里面的img 设置了max width 100% 不就也没宽度了吗

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

冷门布局方法 tabel-cell 的可行性研究

display:table-cell 属性简介 display：table-cell；会使元素表现的类似一个表格中的单元格 td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些 CSS 属性，使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用，设置了 table-cell 的元素对高度和宽度高度敏感，对 margin 值无反应，可以响应 padding 的设置，表现几乎类似一个 td 元素。小结：不要与 float：left; posi

用户1097444

2022/06/29

8600

冷门布局方法 tabel-cell 的可行性研究

【云+社区年度征文】2020一网打尽CSS世界

css 腾讯云开发者社区

一个水平流上只能单独显示一个元素，因此理论上都可以配合clear属性来清除浮动带来的影响。

奋飛

2020/12/14

5.1K0

css布局使用

目录常用居中垂直居中水平居中垂直水平居中单列布局双列&三列布局 ---- 常用居中垂直居中单行文本垂直居中 <div class="parent"> <div class="child">child</div> </div> .parent { line-height: 200px; } 图片垂直居中 <div class="parent"> ![](image.png) </div> .parent { line-height: 200px; } .par

听城

2018/04/27

2K0

17个场景，带你入门CSS布局

CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。

前端GoGoGo

2020/03/20

2.7K0

CSS 基础系列：常见布局方式

给 header、content、footer 设置相同的 width 或者 max-width（显示的宽度都一样，但是前者内容过长会溢出，后者会换行），再设置 margin 达到水平居中。

Chor

2019/11/07

1.8K0

实现div里的img图片水平垂直居中

https java 网络安全

方法一：将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

全栈程序员站长

2022/08/22

3.2K0

实现div里的img图片水平垂直居中

详细的聊一聊如何使用响应式图片，提升网页加载速度

渲染博客工作浏览器响应式

确保图片在所有屏幕尺寸上都能良好显示是一项困难的任务，因为你需要考虑图片的大小、图片的放置位置、显示图片的比例、用户连接的速度等等众多因素。结果是，大多数开发者只会为所有屏幕尺寸使用同一张图片，并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法，因为浏览器仍会下载完整尺寸的图片（通常非常大），即使它只以其一部分尺寸显示。这会浪费用户的带宽，并且会显著减慢页面加载速度（尤其是在较慢的连接下）。

前端达人

2023/08/31

5690

详细的聊一聊如何使用响应式图片，提升网页加载速度

max-width:100%在td或者table-cell里渲染不符合预期小笔记

一直没太注意有这个坑，td或者table-cell的元素里，如果没有指定容器宽度，那么容器里的img标签max-width:100% 在IE7-11，以及firefox下会不理会max-width的限制，例如： <!DOCTYPE html> <html> <head> <title>max-width:100%不兼容小笔记-练小习</title> <style> *{ margin: 0; padding: 0; border:0; } .img-wrap{ dis

练小习

2018/01/15

1.2K0

[读书笔记]响应式web设计转

@media screen and (max-device-width:400px){

LeoXu

2018/08/15

3.7K0

全响应式web前端开发

html css javascript

IMWeb前端团队

2018/01/08

1.9K0

响应式设计

布局浏览器设计响应式设计移动端

给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。网页设计师 Ethan Marcotte 称这种方式为响应式设计（responsive design）。

Cellinlab

2023/05/17

2.1K0

如何做一张属于自己的自适应网页

杨小杰带来网站搭建技术教程相关页面' style='color:red;'>技术教程，现在为大家分享一篇关于如何做一张属于自己的自适应网页的文章，相信看完这篇文章后，你就能给自己来一个漂亮的自适应了！

Youngxj

2018/06/07

1.7K0

自适应网页设计（Responsive Web Design）

随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通

ruanyf

2018/04/13

4.1K0

自适应网页设计（Responsive Web Design）

响应式绿色环保网页

HTML代码如下： <!DOCTYPE html> <html lang="en"> <head> <title>响应式绿色环保</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link h

王凡汎

2020/04/22

1.6K0

响应式设计(Response Web Design)实践

http 网站 html

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。如何让自己的网站也响应式Web设计，可以响应设备的分辨率呢? 根据Ethan Ma

葡萄城控件

2018/01/10

2.4K0

响应式设计(Response Web Design)实践

CSS BFC实现多栏自适应布局

要说web上实现两栏自适应布局的方法，一双手都数不过来。不知大家有没有细想过，为什么这些方法可以实现自适应布局呢？

javascript.shop

2019/09/04

1.6K0

CSS BFC实现多栏自适应布局

Html和CSS布局技巧（转）

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）

山河木马

2019/03/05

4.9K0

随方逐圆--全面理解CSS媒体查询

css https http 网络安全 html

在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在；media属性用于为不同的媒介类型规定不同的样式，而真正广泛使用的媒介类型是'screen'、'print'和'all'

江米小枣

2020/06/15

1.2K0

从box-sizing:border-box属性入手，来了解盒模型

从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。

全栈程序员站长

2022/08/11

2.9K0

从box-sizing:border-box属性入手，来了解盒模型

高度不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。

javascript.shop

2019/09/04

3K0

高度不固定的图片、多行文字的水平垂直居中

相关推荐

冷门布局方法 tabel-cell 的可行性研究

更多 >

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验