scale 相关问题

我正在为网站设置横幅。横幅由图像和其顶部的一些文本组成，代码如下： .banner_div{ </desc> <question vote="2"> <p>我正在为一个网站设置横幅。横幅由图像和其顶部的一些文本组成，代码如下：</p> <pre><code><div class="banner_div"> <style> .banner_div{ background-image: url(/images/banner.jpg); width: 100%; height: 100%; background-size: contain; } </style> <p class="banner_text">Line 1</br>Line 2</p> </div> </code></pre> <p>我需要的是图像覆盖屏幕的整个宽度（即使屏幕比图像宽，在这种情况下图像应该拉伸）并且div的高度相应地缩放以便图像完全显示。我怎样才能做到这一点？我尝试了<pre><code>background-size</code></pre>的每个属性，但没有用...</p> <p>编辑：当前的问题是高度与文本的高度成比例</p> </question> <answer tick="false" vote="3"> <p>我对你的问题有更好的解决方案。</p> <p>问题是因为您没有给出 HTML、BODY 的高度。如果你给出了高度，这个问题就可以解决，不需要添加位置元素，将来会出现一些对齐问题</p> <p><strong>解决方案</strong></p> <p>HTML</p> <pre><code><div class="banner_div"> <p class="banner_text">Line 1</br>Line 2</p> </div> </code></pre> <p>CSS</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>html,body{ height:100%; margin:0; padding:0; } .banner_div{ background-image: url(http://picsum.photos/100/100); background-size: cover; background-position: center; width:100%; height:100%; } .banner_text{ margin:0; padding:20px; }</code></pre> <pre><code><div class="banner_div"> <p class="banner_text">Line 1</br>Line 2</p> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="true" vote="2"> <p>尝试以下解决方案：</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>body, html { margin:0; padding:0; } .banner_div { background-image: url(http://picsum.photos/100/100); position:absolute; top:0; left:0; right:0; bottom:0; background-size:cover; background-position: center; }</code></pre> <pre><code><div class="banner_div"> <p class="banner_text">Line 1</br>Line 2</p> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>首先使用16:9的图像以获得更好的效果：</p> <p>然后使用 <pre><code>img</code></pre> 标签本身，</p> <p>在不考虑宽高比的情况下缩放图像对于横幅来说可能看起来不太好，因此我们使用 <pre><code>width:100%</code></pre> 和 <pre><code>height:auto</code></pre> 来保留横幅比例。大多数屏幕都使用 16:9 比例，所以如果你有 16:9 的图像应该会很好</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>body, html { margin: 0px; padding: 0px; height: 100%; } .banner{ display:block; } .banner img { width: 100%; height: auto; position: relative; } .banner p { float:left; position:absolute; top:0px; }</code></pre> <pre><code><div class="banner"> <img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg" /> <p>Some text here</p> </div> Some random text to show other elements wont overlap the banner</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>这个<pre><code>css</code></pre>代码与我一起工作：</p> <pre><code>background-size: 100% 100%; </code></pre> </answer> </body></html>

html css background-image scale

回答 0 投票 0

Matplotlib 不能一致地使用 plt.xscale('log') 转换绘制的元素

绘制数据时，matplotlib 错误地转换了垂直线。使用线性 x 轴，我的曲线和指向曲线上特定位置的垂直线完美匹配。之后...

matplotlib transform scale logarithm

回答 1 投票 0

“从矩形中心缩放”不适用于世界变换矩阵

我有一个qtquick项目，其中有一个main.qml和一个EaDrawArea，它继承自QQuickPaintedItem，并且可以从main.qml访问。 qml中有一个滑块，它绑定到m_scale（3到...

qt qml scale qt-quick qpainter

回答 1 投票 0

如何让 Kubernetes 根据 Pod 的“就绪”/“未就绪”状态扩展我的部署？

我有一个具有定义数量的副本的部署。我使用就绪探针来通信我的 Pod 是否已准备好/未准备好处理新连接 – 我的 Pod 在就绪/未就绪状态之间切换...