英文:
Can I fix a background-image to its parent?
问题
I'm making a carousel/slider and want to center the images. When I use background-position: center;
they get stretched when I change the width. Can't figure out how to center the images and not stretch them when changing width.
我正在制作一个轮播/滑块,并希望将图像居中显示。当我使用background-position: center;
时,当我更改宽度时,它们会被拉伸。我无法弄清楚如何在改变宽度时将图像居中且不拉伸。
I found out that if I use background-attachment: fixed;
and background-position: center;
It looks like what I want. But the pictures scroll with the page. How can I fix this?
我发现如果我使用background-attachment: fixed;
和background-position: center;
,它看起来像我想要的样子。但是图片会随着页面滚动。我该如何解决这个问题?
Here's my codepen
这是我的 codepen
.carousel {
position: relative;
width: 50rem;
height: 50rem;
margin-top: 12.5vh;
border-radius: 0.25rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
margin-bottom: 200vh;
}
.slide {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
/*
by using these two settings above it looks like how i want. But the scroll is fucked. If i dont use them the shrinking-image stretches/moves */
position: absolute;
height: 100%;
width: 100%;
border-radius: inherit;
}
.current {
background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_1.jpg");
}
.current.shrink {
width: 0;
transition: all 600ms cubic-bezier(0.30005, 0.25, 0.05, 1);
}
.future {
background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_2.jpg");
}
<center>
<div class="carousel">
<div class="slide future"></div>
<div class="slide current"></div>
</div>
</center>
const images = [
"https://daimarubesso.com/assets/image/top/top_visual1_1.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_2.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_3.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_4.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_5.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_6.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_7.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_8.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_9.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_10.jpg"
];
var currentImgIndex = 0;
var futureImgIndex = 1;
function switchBackground() {
$('.current').toggleClass('shrink'); // slide the image to the left
setTimeout(() => { // after sliding is done and we cant see the old image; switch the currentImage with the one that was the background image.
currentImgIndex = (currentImgIndex + 1) % images.length;
futureImgIndex = (futureImgIndex + 1) % images.length;
$('.current').css('background-image', 'url("' + images[currentImgIndex] + '")');
$('.future').css('background-image', 'url("' + images[futureImgIndex] + '")');
$('.current').toggleClass('shrink'); // reset the sliding animation after the new image is set
}, 600); // image switch is delayed 600ms because the sliding animation takes that long
}
setInterval(switchBackground, 4000);
Tried moving the pictures with background-position
, tried using <img> tags instead, I'm stuck :c.
尝试使用background-position
移动图片,尝试使用<img>标签,但我卡住了 :c.
Every comment appreciated, thanks.
感谢每一个评论,谢谢。
英文:
I'm making a carousel/slider and want to center the images. When I use background-position: center;
they get stretched when I change the width. Can't figure out how to center the images and not stretch them when changing width.
I found out that if I use background-attachment: fixed;
and background-position: center;
It looks like what I want. But the pictures scroll with the page. How can I fix this?
Here's my codepen
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.carousel {
position: relative;
width: 50rem;
height: 50rem;
margin-top: 12.5vh;
border-radius: 0.25rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
margin-bottom: 200vh;
}
.slide {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
/*
by using these two settings above it looks like how i want. But the scroll is fucked. If i dont use them the shrinking-image stretches/moves */
position: absolute;
height: 100%;
width: 100%;
border-radius: inherit;
}
.current {
background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_1.jpg");
}
.current.shrink {
width: 0;
transition: all 600ms cubic-bezier(0.30005, 0.25, 0.05, 1);
}
.future {
background-image: url("https://daimarubesso.com/assets/image/top/top_visual1_2.jpg");
}
<!-- language: lang-html -->
<center>
<div class="carousel">
<div class="slide future"></div>
<div class="slide current"></div>
</div>
</center>
<!-- language: lang-js -->
const images = [
"https://daimarubesso.com/assets/image/top/top_visual1_1.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_2.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_3.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_4.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_5.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_6.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_7.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_8.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_9.jpg",
"https://daimarubesso.com/assets/image/top/top_visual1_10.jpg"
];
var currentImgIndex = 0;
var futureImgIndex = 1;
function switchBackground() {
$('.current').toggleClass('shrink'); // slide the image to the left
setTimeout(() => { // after sliding is done and we cant see the old image; switch the currentImage with the one that was the background image.
currentImgIndex = (currentImgIndex + 1) % images.length;
futureImgIndex = (futureImgIndex + 1) % images.length;
$('.current').css('background-image', 'url("' + images[currentImgIndex] + '")');
$('.future').css('background-image', 'url("' + images[futureImgIndex] + '")');
$('.current').toggleClass('shrink'); // reset the sliding animation after the new image is set
}, 600); // image switch is delayed 600ms because the sliding animation takes that long
}
setInterval(switchBackground, 4000);
<!-- end snippet -->
Tried moving the pictures with background-position
, tried using <img> tags instead, I'm stuck :c.
Every comment appreciated, thanks.
答案1
得分: 0
background-attachment: scroll;
的中文翻译为:background-attachment: scroll;
。
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论