DIV+CSS，怎样将背景图片拉伸到全屏！！ 谢谢各位了 急呀~~~

Posted 2023-04-26

拉伸是可以做的,需要用到另外一个属性:
css中设置背景图拉伸填充，在css2.1之前这个背景的长宽值是不能被修改的。 实际的结果是只能重复显示，可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类：
1.是一整张大图，尺寸和区域大小刚好吻合
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。
css3出现以后，可以用background-size 属性来实现背景图拉伸填充。 而且这个属性在firefox，chrome，以及ie9上都可以使用。
具体使用方法如下：
背景图尺寸（数值表示方式）：
#background-size background-size:200px 100px;
背景图尺寸（百分比表示方式）：
#background-size background-size:30% 60%;
背景图尺寸（等比扩展图片来填满元素，即cover值）：
#background-sizebackground-size:cover;
背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）：
#background-size background-size:contain;
背景图尺寸（以图片自身大小来填充元素，即auto值）：
#background-size background-size:auto; 参考技术A background:url(图片路径) 整个DIV 平铺
background:url(图片路径) no-repeat 不 平铺
background:url(图片路径) repeat -y 竖着平铺
background:url(图片路径) repeat -x 横着 平铺
background:url(图片路径) no-repea left top 不平铺 背景图片居 DIV 左边 顶部
background:url(图片路径) no-repea 10px 10px 不平铺 背景图片居 DIV 左边10px 顶部10px 参考技术B 平铺还是不平铺就想要全屏？要平铺的话直接background:url(图片路径就可以了)
不平铺的话没有。。只能看你图片多大就覆盖多大了 参考技术C background-repeat:repeat;

只有平铺没有拉伸 参考技术D 在 BODY里写图片。。。

TailwindCSS 不会将我的 VueJS 应用程序的宽度扩展到全屏

【中文标题】TailwindCSS 不会将我的 VueJS 应用程序的宽度扩展到全屏

【英文标题】：TailwindCSS won't extend the width of my VueJS application to full screen

【发布时间】：2022-01-08 01:22:25

【问题描述】：

我已将所有组件放在一个带有 flex-row、w-screen 和 content-center 的 div 下，由于某种原因，当我在浏览器上进入响应式/移动模式时，它占据了大约 2/3 的屏幕，并且我无法让它填满剩余的屏幕空间。

下面是包含所有组件的视图代码：

<template>
<div class="flex-row h-screen w-screen content-center bg-gray-700">
  <div class="flex w-screen h-5/6 content-center" id="splash"> <Splash /></div>
  <div class="flex bg-blue-800 w-screen h-5/6" id="skills"> <Skills /></div>
  <div class="flex bg-green-700 w-screen h-5/6" id="projects"></div>
  <div class="flex bg-pink-700 w-screen h-5/6" id="about"></div>
</div>  
</template>

<script>
import Splash from '../components/Splash.vue';
import Skills from '../components/Skills.vue';

export default 
  name: "Home",
  components: 
    Splash,
    Skills
  ,
  data: function() 
    return 
    
  

</script>

它最终在移动设备上看起来像这样：

https://i.stack.imgur.com/Y6fLt.png（我将视图的 div 容器的背景设置为灰色以突出显示屏幕还剩多少）

请帮帮我，因为我不知道......谢谢大家！

【参考方案1】：

您可以使用：w-full 代替 w-screen

【讨论】：

首先感谢您的回复！不幸的是，虽然它提供了相同的结果，但我将所有 w-screens 更改为 w-full 没有任何改变..

【参考方案2】：

您将在文档和 Tailwind 示例中看到，特别是在 TailwindUI 的组件库中，它们将创建嵌套的 div，每个 div 都有特定的用途。

他们将拥有外部 div、父容器，并应用边距/填充，然后是嵌套的 div 作为边框，或者相反。然后是一个专门用于 flex 行 col 的 div，然后是用于 flex 行的内部 div，等等。它是一个嵌套结构。他们不会尝试使用一个 div 完成太多事情。

您应该熟悉 Tailwind Play。你可以从这个工具中学到很多东西，它是 Tailwind 的官方游乐场工具。 https://play.tailwindcss.com/

另外，请访问 tailwindui.com 了解他们的 UI 库。他们向您展示的一些代码，请仔细阅读。请参阅 TailwindLabs Youtube 频道。学习基础和高级 TW 非常棒。

这是在移动设备上实现全宽的基本策略，并被限制在上面有填充内容的断点上。

<template>
  <!-- outer container -->
  <div class="container mx-auto sm:px-6 lg:px-8">
   <!-- this would be your main flex container, through a border or anything -->
   <div class="flex flex-col justify-start w-full h-screen">
     <!-- now define your child flex containers, cols or rows or define CSS grid-->
     <!-- you could put your nav or header here as you're in a flex col-->
     <header />
     <!-- now define your horizontal layout for Splash, Skills, etc.-->
     <!-- or place your full height mobile content here. -->
     <div 
  </div>
  </div>
</template>

正确的布局很棘手。 TailwindUI 和 Tailwind Labs 有很多免费内容，可以帮助您正确构建外部结构，以便您可以专注于内部内容。此外，还有很多免费的 Tailwind 组件可以解决这个问题和其他问题，您可以从中学习技巧/窍门。https://tailwindcomponents.com/search?query=layouts 祝你好运！ 马库斯