-
28 votesanswersviews
响应式图像全屏和居中 - 保持纵横比，不超过窗口
所以我希望显示 img 尽可能大（当它是风景时是填充宽度/纵向时的高度） 没有作物 无歪斜或拉伸（原始宽高比） 垂直和水平居中 此外，图像的原始大小未知 . 我已经为此尝试了很多不同的选项，包括一个flexbox（获得垂直中心），但似乎没有任何东西勾选所有方框 . 理想情况下，我当然希望这是一个全CSS解决方案，但我也在研究一些JS . 谢谢 -
-2 votesanswersviews
自动裁剪响应背景图像
想要设置为高度调整大小的背景图像将填充而不重复，但会以某种方式裁剪宽度以锁定纵横比 . 我不知所措，有什么想法吗？ -
0 votesanswersviews
保持图像的纵横比，但在达到最大/最小高度时进行裁剪
我增加但是只会裁剪顶部和底部以保持比率而不是伸展 . 此外，我希望图像高度不会低于200px，只是左右 . 我希望图像永远是中心 . 这是我到目前为止：https://jsfiddle.net/4q83mh41/ <div class="hero"> <img src="http://wpdevserver.x10host.com/wp-conten... -
0 votesanswersviews
如何有效地将图像高度缩放到设备的高度
在我的网站的首页，我有一个图像，我想要适合屏幕/设备的高度，如果设备高度改变它应响应反映通过调整大小（不裁剪） . 我如何实现这一目标？ 我希望我有道理，请参阅this jsfiddle作为我想要达到的目标的一个例子 . 尝试： min-height:100%; min-width:100%; -
13 votesanswersviews
根据宽度和高度保持纵横比
可以在视口中放置一个方形 div 并使其居中并始终保持 aspect ratio according to width and height ？ 要求 ： 只有CSS 正方形的大小必须适应视口的最小尺寸（宽度或高度），而不管视口的方向（横向或纵向） . 正方形必须在视口中以水平方向和垂直方向居中 例： -
211 votesanswersviews
响应地改变div大小保持宽高比[重复]
这个问题在这里已有答案： Maintain the aspect ratio of a div with CSS 21个答案 当我给图像一个百分比的宽度或高度时，它只会增长/缩小保持其纵横比，但如果我想要与另一个元素相同的效果，是否可以使用百分比将宽度和高度联系在一起？ -
23 votesanswersviews
根据高度保持div纵横比
我需要将元素的 width 维持为 height 的百分比 . 因此，随着高度的变化，宽度会更新 . 相反的情况可以通过使用填充顶部的％值来实现，但填充左边的百分比将是对象宽度的百分比，而不是其高度 . 所以使用这样的标记： <div class="box"> <div class="inner"></div> <... -
3 votesanswersviews
自定义帖子类型滑块
我看了看，但我找不到一个Wordpress插件，它给了我在Slider中提供的所有以下功能： 从我自己开发的自定义帖子类型中显示自定义帖子 - - 显示特色图片， Headers 和摘录（不是完整帖子） 以随机顺序显示 - 来自该类型的100个自定义帖子的列表 响应因此适应屏幕/容器大小 图像和摘录的大小各不相同 . 作为奖励，我想显示一些与帖子相关的自定义分类名称，尽管这并不... -
1 votesanswersviews
当我将手机侧向转动时，我的滑块旋转滑块的移动版本将恢复为滑块的非移动版本 .
The site in question. 我使用Slider Revolution创建了一个滑块/ Headers . 我希望滑块在移动设备上的显示方式与非移动设备上的显示方式不同（非移动设备上的视频和移动设备上的图片） . 这种方法非常有效，直到用户将手机侧向转动 . 这会导致滑块恢复为非移动版本 . 我能想出的最简单的解决方案是在平板电脑上制作滑盖显示器的移动版本 . 但是，我想如果平板电... -
1 votesanswersviews
调整大小后，响应式导航会消失吗？
我有一个响应式下拉导航，在功能方面经历了相当大的打嗝 . 基本上，页面将正确加载，一切都会工作，等等 . 如果我调整页面大小以显示我的移动导航，它将显示我的汉堡包菜单，让我点击并关闭所有工作 . 但这是问题所在 如果我去手机，打开它，然后调整大小而不关闭它，导航将保持可见 . 如果我去手机，打开它，然后关闭它，然后调整大小，导航将消失 . 我包含了一些基本的HTML我的JS函数，以及指... -
1 votesanswersviews
D3：创建响应范围条形图
我正在尝试在D3中创建一个范围条形图（参见a similar example） . 我找到了this answer，我能够将它自定义为我需要的东西，除了它使用古老版本的D3，数据是单独阵列的愚蠢格式，并且它没有响应（为什么这么多D3的东西出来了有没有回应？） . 我放弃了这种尝试，从头开始 . 我现在主要使用最新的D3和上面的SO问题中的一些想法，但数据显示不正确 . 当我调整大小时，条纹不可预测... -
2 votesanswersviews
在桌面和移动版网站之间切换的策略
现在研究了几个小时，我想找到一个聪明的解决方案，让用户有机会切换到当前移动版网站的桌面版本 . 从技术上讲，我要么拥有专门的移动网站，要么拥有媒体查询的单一网站，以使设计负责 . 对我而言，具有响应式设计的单个网站的最后选择是非常有趣的 . 1.）您可以通过哪些方式来操纵用户的设计？ 2.）它应该在服务器端还是客户端？优点缺点？ 3.）您对可能的解决方案有什么样的经验？ 我知道那里已经有一些问题.... -
0 votesanswersviews
如何使用猫头鹰旋转木马在不同的分辨率下显示不同的图像？ WordPress
是否可以使用不同的图像并根据屏幕分辨率显示这些图像？例如，如果我是 5 个图像，如 image1，image2，image3，image4 和 image5。然后我想在桌面上显示 image1，image2 和 image3，而当涉及到移动设备时，我想只显示 image4 和 image4。我们可以这样或任何其他方式去吗？任何一个引导我的人都希望它现在明确我想要表现的是什么？ -
0 votesanswersviews
Magento 2 - 如何在Luma儿童主题中制作响应式布局？
如何覆盖styles-m css来设置响应式布局？我只是在页脚区域添加自定义块，这些块在移动视图中没有响应 . 如何覆盖Luma子主题中的styles-m？ 谢谢 How to set mobile view? -
0 votesanswersviews
如何阻止元素div（即将推出）移动？
我想做一个响应即将到来的页面website 我在这个site添加了即将推出的剧本 这是我修改后加载/来的script 但是当我尝试将网站从下到上调整大小时，我的问题将会加载/即将推出，但我只是希望它始终位于徽标之下？这个网站脚本jsfiddle . .responsive { max-width: 100%; height: auto; } #cssload-wrappe... -
1 votesanswersviews
IE11：如何防止精灵动画来纠正合作
按照惯例，在网站的左上角，我放置了一个包含在主页链接中的公司徽标 . 该图像属于精灵，同时具有相同图像的不同尺寸（以及其他图像） . 该网站具有响应式CSS，因此相关元素的默认背景图像是较小的移动版本，媒体查询选择桌面浏览器的较大版本 . 但是，当在Internet Explorer 11中加载页面时，您可以看到正在操作的图像的较大版本 . 事实上，如果你点击图标重新加载主页就会变得非常明显：精灵... -
0 votesanswersviews
CSS背景转换和响应（淡出）
此论坛的成员非常友好地提供以下CSS滚动代码，该代码“流畅”并且可以根据浏览器大小调整维度 . 我已将下面的代码与Jfiddle链接一起包括在内： CSS .container { width: 100%; height: 300px; background: #f1f1f1; } a.widgetbook { display:block; max-widt... -
0 votesanswersviews
列可折叠到移动设备上的按钮
我有一个2列页面，我希望在小屏幕上第一列被一个只有一个按钮的小列替换 . 当您单击该按钮时，原始的第一列将再次出现（例如，它在Wordpress上） . 谢谢 . -
1 votesanswersviews
WordPress图像大小和响应式设计
好的，我得到了响应式设计背后的所有方法和思考，我已经创建并讨论了媒体查询，我知道如何根据所有这些使用css max-width更改图像大小：100％;规则 . 困扰我的一件事我似乎无法理解这一点 . 当我将图像上传到WordPress以便在我的响应主题中使用时，它们应该是什么尺寸？我是否需要像静态网站一样定义图像大小，或者我只上传我想要使用的最大图像大小，并让max-width负责调整缩略图等所有... -
0 votesanswersviews
响应单位没有真正起作用
我正在开发一个我正在努力做出回应的页面 . 我正在使用背景图像并尝试将它们一个放在另一个之下但是当使用响应单位（vh，em，rem，％）添加margin-top属性时，我的背景图像会移动但是图像的位置会有很大的变化在笔记本电脑的屏幕和Ipad屏幕上 . 链接：http://dbtest.destinationballybunion.ie/?page_id=3733 正如我所说，我尝试使用所有响应单... -
0 votesanswersviews
如何解决移动设备的“响应式设计模式”问题（Wordpress主题）？
我在"responsive-design mode"中使用了wordpress主题 . 在iPad上查看网站会呈现它应有的方式（包括桌面，无响应），但在iphone上查看会变得混乱 . 有人可以帮我弄清楚如何将iPad风格复制到iPhone和所有非桌面设备;并完全删除智能手机样式 . 我希望复制所有移动设备（只是较小版本）的iPad的确切布局 . 这个主题的作者告诉我要查看&q... -
94 votesanswersviews
如何从Bootstrap 3获得响应式网格？
我需要使用Twitter Bootstrap为我的Web应用程序添加响应式设计功能 . 我只想要响应行为，我对排版，组件或Bootstrap中包含的任何其他东西不感兴趣 . 我刚刚选择了网格系统customized Bootstrap version . 但是，当我将生成的CSS添加到我的应用程序时，我的所有样式都搞砸了（ Headers ，链接和其他） . 为什么会这样？如何只使用网格系统获得B... -
-2 votesanswersviews
响应三列div布局
我正在开发一个三列布局的页脚 . 我需要这个页脚响应每个div在移动设备上彼此堆叠，不包括平板电脑 . 这是HTML： <div id="footer-pages"> <div class="footer-container"> <div id="one"> contain... -
1 votesanswersviews
对象：填充;不工作[重复]
这个问题在这里已有答案： Why isn't object-fit working in flexbox? 2个答案 我用 flexbox 编写了这个响应式图库代码 我将每个 flexbox_item 的背景颜色样式设置为青色，以显示每个flexbox_item块的尺寸： background-color: cyan; 现在我想要图像填充他们的块，所以我使用： object-fit: fil... -
2 votesanswersviews
Bootstrap 3.0导航响应切换按钮不起作用
我已经检查了这个问题的类似答案，并在此设置了类似于此响应的代码，但仍无法使其工作： bootstrap 3 navbar collapse button not working 我甚至尝试在Bootstrap 3站点上使用默认 navbar 的确切代码，但它仍然无效 . 我在头部包含了这两个链接，我的路径是正确的： http://netdna.bootstrapcdn.com/bootstrap/... -
1 votesanswersviews
对于响应（不固定）大小的2个图像使用CSS位置绝对，相对和z索引
我试图覆盖2个图像，但它们都需要响应高度和大小（即父DIV不是固定大小（特别是缩略图上的播放按钮） . 例... <div class="img-wrap"> <div class="play-button">Play Button Img</div> <div class="thumb-ima... -
1 votesanswersviews
SVG内联 - 默认或继承高度
请帮我理解从哪里获得150px的高度？ 在我的项目中，我希望元素与内容大小相同但是根svg元素和可见svg获得150px的高度（可能来自空间） 我用类似的条件制作演示 . http://plnkr.co/edit/2EJiwZFSwjD2f4wrETiX?p=preview <body> <svg xmlns="http://www.w3.org/2000/svg&q... -
6 votesanswersviews
如何在移动设备上强制桌面视图 - Bootstrap？
如何在移动设备上强制桌面视图 - Bootstrap？ 我尝试使用固定端口的视口到1024，但它仍然不适合我 . 任何建议!! -
396 votesanswersviews
流体或固定网格系统，采用响应式设计，基于Twitter Bootstrap
我对twitter bootstrap grid中的各种选项感到困惑，以及它们如何结合在一起 . 首先，您可以使用普通的固定 container 或 container-fluid . 然后任何一个都可以包含普通的 row 或流体行 row-fluid . 也就是说，你可以拥有一个带有流体排的固定容器，或一个带有固定排的容器流体...... 最重要的是，您可以包含“响应式”媒体查询 . 我对这... -
1 votesanswersviews
vmware项目清晰度和响应式设计组件的角度
我们正在寻找有角度的UI组件库，我们发现project clarity可以满足我们项目的所有需求 . 但我们最后关注的是响应能力 . 即使在他们的网站上我也找不到明确的答案 . 所以，我想听听之前使用它的人 . 项目清晰度是否具有响应式设计组件？