css 我怎样才能把图像设置成一定大小的框出现正常

1zmg4dgp 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(130)

我写了这样的代码：

import React from 'react'

function OurCourse() {
  return (
    <div className='w-full '>
        <div className='w-full h-[390px]' style={{
            backgroundImage:'url(https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-

4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80)',
            backgroundSize:'contain',
            backgroundRepeat:'no-repeat',
        }}>

        </div>
    </div>
  )
}

export default OurCourse

我想根据className中给出的div大小设置这个背景图像，但是运行后出现的图像是这样的

我想要这样的输出

我可以使文字，但不是背景图像，因为它出现

css

来源：https://stackoverflow.com/questions/76370316/how-can-i-set-the-image-into-a-certain-size-box-appear-properly

2条答案

按热度按时间

zzzyeukh1#

你可以在TailwindCSS中设置任意值的url，所以你不必使用style对象和类的组合。正如在注解中提到的，实现您想要的功能的最佳方法是使用background-size属性设置为cover。

function OurCourse() {
  return (
    <div className="h-[390px] bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=90')] grid place-content-center"> 
      <h1 className="text-white font-serif text-2xl">Our Courses</h1>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<OurCourse />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="root"></div>

另外，尽量不要使用w-full或width：100%。HTML中块元素的默认“自动”或自然行为是100%填充可用空间，因此您几乎不需要它。

赞(0）回复(0）举报 2023-06-07

gmxoilav2#

使用下面的CSS属性来显示背景图像的中心部分

{background-position:center;background-size:cover}

示例代码

.h-390 {
  color: #fff;
  position: relative;
  width: 80%;
  display: inline-block;
  height: 180px;
  background-image: url(https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80);
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center;
}

.text {
  top: 46%;
  left: 30px;
  position: absolute;
}

<div class='w-full h-390'>
  <div class="text">Our courses</div>
</div>

赞(0）回复(0）举报 2023-06-07

我来回答

css 我怎样才能把图像设置成一定大小的框出现正常

2条答案

相关问题

热门标签

最新问答