[英]CSS: Image scale with width
我有一個帶有圖像背景的 div(在 React 和 Next.js 中,但這應該無關緊要)。
import styles from './my-component.module.css';
import Background from '../../../public/assets/images/background-image.png';
// later
<div
style={{ backgroundImage: `url(${Background})` }}
className={`${styles['background-image']}`}
>
這是我目前使用的 CSS:
.background-image {
border-radius: 8px;
background-size: cover;
background-repeat: no-repeat;
height: auto;
}
我無法讓圖像占據全高。 它應該始終采用顯示器的寬度,但在不拉伸或重復的情況下盡可能多地采用高度。 我怎樣才能做到這一點?
更新:是的,容器的高度高於元素。
更新 2 Viira 的解決方案幾乎有效,但圖像不考慮右側的填充。
也許這會有所幫助。
不要將其設置在背景圖像中嘗試將其插入 img 標簽
*{box-sizing: border-box;} body { margin: 0; } .background-image { border-radius: 8px; background-size: cover; background-repeat: no-repeat; height: auto; } .container { display: table; width: 100%; } .img { display: table-cell; width: 100%; position: absolute; z-index: -1; } .img img { width: 100%; } .text { display: table-cell; padding: 30px; width: 100%; }
<div class="background-image"> <div class="container"> <div class="img"> <img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg"> </div> <div class="text"> <h1>Are you ready</h1> <p>Click the link</p> <button>Click Here</button> </div> </div> </div>
注意:圖像被拉伸到全寬,因為它的分辨率很低。 您可以將其寬度設置為自動以顯示其原始大小。
解決方案2:
正如 OP 所提到的,圖像不尊重填充。 我想出了一個解決方案。 由於 .container div 在 display: table; 那里不允許填充。 因此,通過將填充提供給其父 .background-image,這個問題將被解除。
*{box-sizing: border-box;} body { margin: 0; } .background-image { border-radius: 8px; padding: 15px 40px; } .container { display: table; width: 100%; max-width: 100%; position: relative; } .img { display: table-cell; width: 100%; position: absolute; z-index: -1; } .img img { width: 100%; } .text { display: table-cell; padding: 30px; width: 100%; }
<div class="background-image"> <div class="container"> <div class="img"> <img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg"> </div> <div class="text"> <h1>Are you ready</h1> <p>Click the link</p> <button>Click Here</button> </div> </div> </div>
為 .background-image div 設置填充,以便應用填充。
所以你想讓你的圖像來確定你的 div 的高度。 當使用圖像作為背景時,這是不可能的。
您需要將圖像作為元素加載到 dom 中,然后可用於確定 div 的高度,如果您想在這種情況下在圖像頂部顯示一些內容,則必須將其覆蓋在圖像頂部.
這是您可以用來實現此目的的示例 html 結構
<div style="position:relative"> <img src="https://images.unsplash.com/photo-1573496528816-a104a722b3db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%; height: auto;" /> <div style="position:absolute; top: 0; left: 0; width: 100%; height: 100%"> // YOUR CONTENT </div> </div>
這是我最終解決它的方法:
import PropTypes from 'prop-types';
import React from 'react';
import styles from './background-image-card.module.css';
function BackgroundImageCard({ alt, children, className, image }) {
return (
<div className={`${className} ${styles.container}`}>
<div className={styles.overlay} />
<img alt={alt} src={image} className={styles['background-image']} />
<div className={styles.content}>{children}</div>
</div>
);
}
BackgroundImageCard.propTypes = {
alt: PropTypes.string,
children: PropTypes.node,
className: PropTypes.string,
image: PropTypes.string,
};
export default BackgroundImageCard;
.container {
align-items: center;
display: flex;
justify-content: center;
position: relative;
width: 100%;
}
.overlay {
background: var(--gray-800);
border-radius: 8px;
height: 100%;
opacity: 0.8;
position: absolute;
width: 100%;
}
.background-image {
border-radius: 8px;
height: auto;
width: 100%;
z-index: -1;
}
.content {
position: absolute;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.