responsive-design 相关问题

页脚未覆盖页面宽度的 100%

我有一个页面，其中包含以下页脚代码 。页脚 { 显示：柔性； 对齐项目：居中； 宽度：100%； 保证金：0； 高度：100%； 背景颜色：黑色； 颜色: 素瓷; 字体大小：20px； } 我知道我...

响应式网页设计不响应

我正在尝试通过移动优先来创建一个响应式网站。当我开始添加媒体查询（最小宽度）时，我会切换 Google 上的检查元素以查看它是否响应。 我

强制引导响应图像为正方形

图像是在循环中创建的： 图像是在循环中创建的： <div id="row"> <div class="col-sm-6"> <div id="row"> <?php foreach ($products as $product) { ?> <div class="col-sm-6"> <a href="/admin/product/" class="thumbnail"> <div class="caption"> title<br> 10 x viewed </div> <img src="/assets/img/product/<?php echo $product['img'] ?>" class="img img-responsive full-width" /> </a> </div> <?php } ?> </div> </div> </div> 图像具有不同的尺寸有些比宽度高，有些比高度更宽。我怎样才能在响应的同时强制所有图像具有相同的高度。 他们可以使用宽度：100％，但我不能使用高度：自动，比例将保持不变。 我应该怎么做才能使我的图像平方，同时它们有响应并且我不知道％。 比如，绿衬衫的高度没有他的宽度 我想在没有 jquery 的情况下做到这一点，所以只使用 CSS！ 你可以这样做： 用 padding-bottom:100%; overflow:hidden; position:relative 将图像包裹在容器中 将图像绝对放置在该容器内。 小提琴 说明： Padding top/bottom（如 margin top/bottom）是根据父元素的宽度计算的。由于 .image div 与其父元素具有相同的宽度，因此设置 padding-bottom:100%; 使其高度与其宽度相同，因此它是正方形（其内容需要绝对定位或浮动，这样就不会改变父级的大小）。 HTML： <div class="col-sm-6"> <a href="#" class="thumbnail"> <div class="caption"> title<br/>3 x bekeken </div> <div class="image"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> CSS： .image{ position:relative; overflow:hidden; padding-bottom:100%; } .image img{ position:absolute; } 这是各种尺寸图像的最佳解决方案 http://jsfiddle.net/oboshto/p9L2q/53/ HTML 相同： <div class="col-sm-6"> <a href="#" class="thumbnail"> <div class="caption"> title<br/>3 x bekeken </div> <div class="image"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> 新CSS： .image{ position:relative; overflow:hidden; padding-bottom:100%; } .image img{ position: absolute; max-width: 100%; max-height: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } 您可以将每个图像包装在一个 div 中，然后将 div 的溢出设置为隐藏。只要 div 是方形的，那么您的图像就会被裁剪。 div 也可以响应。 类似帖子 这个链接对我有用。JSFiddle 不用使用 <div><img/></div>，而是使用 background-position; background-size; background-repeat 就能达到目的。 web-tiki 答案几乎对我有用，对于更大的图像，我必须添加此 HTML 和 CSS 以使它们在正方形内居中： .image{ position:relative; overflow:hidden; padding-bottom:100%; } .image img{ position:absolute; width: 100%; height: 100%; object-fit: cover; }<div class="col-sm-6"> <a href="#" class="thumbnail"> <div class="caption"> title<br/>3 x bekeken </div> <div class="image"> <img src="" class="img img-responsive full-width" /> </div> </a> </div> 在我看来，这是一个符合 Bootstrap 精神的解决方案： <div class="ratio ratio-1x1"> <img class="img-fluid src="my_image.png" /> </div> 在 Bootstrap 5.3 上进行了测试，但 Bootstrap 5 中已经支持这种方式，并且 Bootstrap 4 中也以不同的模式支持。

如何使<svg>元素展开或收缩到其父容器？

的目标是让 元素扩展到其父容器（在本例中为 ）的大小，无论该容器有多大或多小。 代码： 是...</desc> <question vote="121"> <p>目标是让 <pre><code>&lt;svg&gt;</code></pre> 元素扩展到其父容器的大小，在本例中为 <pre><code>&lt;div&gt;</code></pre>，无论该容器有多大或多小。</p> <p>代码：</p> <pre><code>&lt;style&gt; svg, #container{ height: 100%; width: 100%; } &lt;/style&gt; &lt;div id=&#34;container&#34;&gt; &lt;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; version=&#34;1.1&#34; &gt; &lt;rect x=&#34;0&#34; y=&#34;0&#34; width=&#34;100&#34; height=&#34;100&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; </code></pre> <p>此问题最常见的解决方案似乎是在 <pre><code>viewBox</code></pre> 元素上设置 <pre><code>&lt;svg&gt;</code></pre> 属性。 </p> <pre><code>viewBox=&#34;0 0 widthOfContainer heightOfContainer&#34; </code></pre> <p>但是，在 <pre><code>&lt;svg&gt;</code></pre> 元素内的元素具有预定义宽度和/或高度的情况下，这似乎不起作用。例如，上面代码中的 <pre><code>&lt;rect&gt;</code></pre> 元素显式设置了其宽度和高度。</p> <p>因此，显而易见的解决方案是在这些元素上也使用％宽度和％高度。但这是必须要做的吗？特别是，因为 <pre><code>&lt;img src=test.svg &gt;</code></pre> 工作正常并且扩展/收缩没有任何问题，明确设置 <pre><code>&lt;rect&gt;</code></pre> 高度和宽度。</p> <p>如果像 <pre><code>&lt;rect&gt;</code></pre> 这样的元素以及其他类似的元素必须以百分比定义其宽度和高度，那么 Inkscape 中是否有一种方法可以设置它，以便所有具有 <pre><code>&lt;svg&gt;</code></pre> 文档的元素都使用百分比宽度、高度、等等..而不是固定尺寸？</p> </question> <answer tick="false" vote="55"> <p><pre><code>viewBox</code></pre>不是容器的高度，而是绘图的大小。将 <pre><code>viewBox</code></pre> 的宽度定义为 100 个单位，然后将 <pre><code>rect</code></pre> 定义为 10 个单位。之后，无论您将 SVG 缩放到多大，<pre><code>rect</code></pre> 都将是图像宽度的 10%。</p> </answer> <answer tick="false" vote="31"> <p>假设我有一个如下所示的 SVG： <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZzamJrLmpwZw==" alt="pic1"/> </p> <p>我想将它放在一个 div 中并使其响应式地填充 div。我的做法如下：</p> <p>首先，我在 inkscape 等应用程序中打开 SVG 文件。在“文件”->“文档属性”中，我将文档的宽度设置为 800px，高度设置为 600px（您可以选择其他尺寸）。然后我将 SVG 放入此文档中。</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1lSckZVLmpwZw==" alt="pic2"/></p> <p>然后我将此文件另存为新的 SVG 文件，并从该文件中获取路径数据。 现在，在 HTML 中，实现神奇效果的代码如下：</p> <pre><code>&lt;div id=&#34;containerId&#34;&gt; &lt;svg id=&#34;svgId&#34; xmlns:svg=&#34;http://www.w3.org/2000/svg&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; version=&#34;1.1&#34; x=&#34;0&#34; y=&#34;0&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 800 600&#34; preserveAspectRatio=&#34;none&#34;&gt; &lt;path d=&#34;m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z&#34; fill=&#34;#f00&#34;/&gt; &lt;/svg&gt; &lt;/div&gt; </code></pre> <p>请注意，SVG 的宽度和高度都设置为 100%，因为我们希望它垂直和水平填充容器，但 viewBox 的宽度和高度与 inkscape 中文档的宽度和高度相同，即 800px X 600 像素。您需要做的下一件事是将preserveAspectRatio 设置为“none”。如果您需要了解有关此属性的更多信息，这里有一个很好的<a href="http://codepen.io/jonitrythall/blog/preserveaspectratio-in-svg" rel="noreferrer">链接</a>。这就是全部内容。</p> <p>还有一件事是，这段代码适用于几乎所有主要浏览器，甚至是旧浏览器，但在某些版本的 android 和 ios 上，您需要使用一些 javascrip/jQuery 代码来保持一致。我在文档准备和调整大小功能中使用以下功能：</p> <pre><code>$(&#39;#svgId&#39;).css({ &#39;width&#39;: $(&#39;#containerId&#39;).width() + &#39;px&#39;, &#39;height&#39;: $(&#39;#containerId&#39;).height() + &#39;px&#39; }); </code></pre> <p>希望有帮助！</p> </answer> <answer tick="false" vote="9"> <p>最近对我有用的是从 <pre><code>height=&#34;&#34;</code></pre> 标签和所有子标签中删除所有 <pre><code>width=&#34;&#34;</code></pre> 和 <pre><code>&lt;svg&gt;</code></pre> 属性。然后，您可以使用父容器高度或宽度的百分比进行缩放。</p> <p>之前：</p> <pre><code>&lt;svg width=&#34;3212&#34; height=&#34;3212&#34; viewBox=&#34;0 0 3212 3212&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; circle cx=&#34;1606&#34; cy=&#34;1606&#34; r=&#34;1387&#34; stroke=&#34;black&#34; stroke-width=&#34;438&#34;/&gt; &lt;/svg&gt; </code></pre> <p>之后：</p> <pre><code>&lt;svg viewBox=&#34;0 0 3212 3212&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; circle cx=&#34;1606&#34; cy=&#34;1606&#34; r=&#34;1387&#34; stroke=&#34;black&#34; stroke-width=&#34;438&#34;/&gt; &lt;/svg&gt; </code></pre> </answer> <answer tick="false" vote="3"> <p>@robertc 说得对，但您还需要注意，<pre><code>svg, #container</code></pre> 会导致 svg 以指数方式缩放，但不是 100%（一次为 <pre><code>#container</code></pre>，一次为 <pre><code>svg</code></pre>）。</p> <p>换句话说，如果我对两个元素应用 50% h/w，它实际上是 50% 的 50%，或 0.5 * 0.5，等于 0.25 或 25% 比例。</p> <p>按照 @robertc 的建议使用时，一个选择器可以正常工作。</p> <pre><code>svg { width:50%; height:50%; } </code></pre> </answer> <answer tick="false" vote="2"> <p>对于您的 iPhone，您可以在头部应答器中使用：</p> <pre><code>&#34;width=device-width&#34; </code></pre> </answer> <answer tick="false" vote="0"> <p>我成功地缩放到窗口大小，如下所示。其中一个子集是扩展到父级。破坏我尝试过的数十种方法的复杂因素是有 2-3 个 SVG 区域需要随着浏览器窗口的变化而缩放。这也使用顺风。</p> <pre><code>&lt;body&gt; &lt;div class=&#34;w-full h-screen p-2&#34;&gt; &lt;svg class=&#34;w-full h-2/4&#34; viewBox=&#34;0 0 100 100&#34; preserveAspectRatio=&#34;none&#34;&gt; &lt;rect class=&#34; fill-red-950 &#34; x=&#34;0&#34; y=&#34;0&#34; width=100 height=100 /&gt; &lt;/svg&gt; &lt;div class=&#34;h-2/4&#34;&gt; &lt;div class=&#34;w-full h-full&#34;&gt; &lt;svg class=&#34;w-full h-full&#34; viewBox=&#34;0 0 100 100&#34; preserveAspectRatio=&#34;none&#34;&gt; &lt;rect class=&#34;fill-yellow-400 &#34; x=&#34;0&#34; y=&#34;0&#34; width=100 height=100 /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>w-full 适用于宽度，但我需要 h-screen 来获取屏幕高度。 接下来，您使用 h-2/4 之类的方案来共享垂直空间。在嵌套 div 中继续执行 w-full h-full 非常重要，直到到达需要相同的 svg。</p> <p>如果您需要对 CSS 样式进行逆向工程，请参阅 <a href="https://tailwindcss.com/docs/height" rel="nofollow noreferrer">Tailwind 文档</a>，了解此处类内使用的各种选项。类似的方法可以水平使用，但比垂直有更多的选择。 CSS 百分比或 Flex 或网格等</p> </answer> </body></html>

台式机、笔记本电脑和平板电脑横向上的 WordPress 导航菜单断点问题

我正在尝试使导航菜单在我的 WordPress 网站上响应式工作，但遇到以下问题： 我有一个两列标题，50/50 盒装结构 - 左侧是日志...

iPhone 上不出现选择箭头

寻找解决我遇到的问题的方法。 我正在制作一个响应式网站，它有一个选择标签，允许用户选择他们想要显示的博客文章类别，html 只是一个......

响应式图片选择显示错误的图像

我想在不同的视口上显示不同的图像。因此，我将 标签与两个源和相应的媒体查询一起使用。我已经清除了我的缓存几次...

我使用了`grid-template-rows: 200px 200px;`。但它并没有创建 2 行和多列

预期输出：2行多列 我得到的输出：多行和 1 列 超文本标记语言 ` 简单的网格示例 &l... 预期输出：2行多列 我得到的输出：多行和 1 列 HTML `<body> <h1>Simple grid example</h1> <div class="container"> <div >One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> </div> </body>` CSS .container{ display:grid; grid-template-rows : auto auto; } 您需要使用包装器分隔行，如下所示： <div class="container"> <div> <div >One</div> <div>Two</div> <div>Three</div> <div>Four</div> </div> <div> <div>Five</div> <div>Six</div> <div>Seven</div> </div> </div>

不同窗口大小下的文本被截断

我对这一切都很陌生，所以我感谢你的帮助！ 我想要它的样子 当窗口变小时 这是我使用的 CSS： .typeit { 溢出-x：自动； /* 允许水平滚动 */ 字体大小...

不同显示器的响应能力

我有一个按照 1920X1080 设计创建的 React 应用程序。在 27 英寸/24 英寸/13 英寸 leptop 上，该应用程序看起来很棒。但如果我在 34 英寸宽屏半屏上渲染应用程序，...

如何垂直居中响应式布局，并修复移动设备上的填充

我有一个在 iframe 中包含 html5 游戏的页面 - 它的垂直尺寸为 3:4，并且下面有一行文本。 它垂直缩放并保持 3:4 的比例，没问题 - 但游戏和文本没有...

如何垂直居中我的响应式布局，并修复移动设备上的填充

我对 CSS 和响应式设计还很陌生。 我有一个使用 iframe 放入页面的游戏 - 它的垂直尺寸为 3:4，并且下面有一行文本。 它垂直缩放，并且...

如何创建一个基于高度而不是宽度的响应式页面？

我正在尝试为我将使用 iframe 嵌入的游戏创建一个非常简单的页面。 我希望响应能力与此页面完全相同：https://rajeevbasu.com/projects/wil3d/index。

如何在div的高度响应的情况下与页面底部保持特定距离

} 目前，我正在创建一个聊天机器人和聊天输入部分，当高度变化时，它有时会消失，它会离开屏幕，或者当手机屏幕很大时，它会显示上面的输入

针对特定 CSS 格式问题的 CSS 响应网站

我一直在研究这个网站，现在我遇到了一个问题，使我的网站做出响应。 （我选择不使用CSS框架，这样我可以更好地理解CSS）。然而，我的大脑很友好......

复杂的边框线设计

我想创建一个像这样的图像的动态网格视图。 但我面临着这种类型的线条边框的问题。有什么方法可以初始化容器边框的开始和结束位置吗？不然的话...

Material UI 字体大小不响应

我使用材料 UI 组件（例如自动完成框、选项卡和按钮）创建了该网站，但现在我发现这些组件具有响应性，但文本却没有。 例如，我有一个

html 元视口标签

我构建了一个html登陆页面，你可以在这里看到它 我以这种方式使用元视口标签： 当我从手机进入此页面时，...

如何制作响应式内容[关闭]

我很困惑如何使此代码响应。请查看下面的示例并告诉我。 #appalign{font-family:"montserrat-regular",sans-serif;margin-left:32%;margin-right:10%;text-align:

我的 HTML 或 CSS 阻止我在移动尺寸的屏幕上向下滚动

标题几乎说明了我的问题是什么。我做了一些谷歌搜索，但找不到任何有用的东西，所以我来到了这里。以下是该网站的链接：https://aquamarine-catharina-45.tiiny.site/ 我