当图像小于特定大小时，如何更改图像源？
当图像小于特定大小时，如何更改图像源？
提问于 2018-08-21 05:04:17
我有一个带有侧边栏的网页。顶部是一个徽标。当侧边栏折叠(变小)时，徽标也随之变小。而不是发生这种情况，我想过渡(动画)到另一个标志而不是。
因此，较大的徽标基本上会淡入另一个徽标中。
我喜欢使用css或jquery，尽管我不是专家。所以我想知道是否有人能帮我？
当它变小时，你只能看到CT，我想转换一下徽标。
示例：
回答 3
Stack Overflow用户
发布于 2018-08-21 05:25:56
您可以将您的图片作为背景图片，然后使用媒体查询进行更改。在这种情况下，转换是可行的。
例如：
.box {
width: 141px;
height: 100px;
transition: 500ms;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-ms-transition: 500ms;
-o-transition: 500ms;
background-image: url(images/picture.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
@media only screen and (min-width:800px) {
.box {
background-image: url(images/gym.png);
}
}<body>
<div class="box"></div>
</body>
Stack Overflow用户
发布于 2018-08-21 05:12:06
你可以使用"content“属性CSS。当侧边栏折叠时，您可以设置较小徽标的新url，并使用转换来动态更改。
我希望它能对你有所帮助。致以最好的问候，伊曼纽尔
Stack Overflow用户
发布于 2018-08-21 06:35:08
尽管使用纯CSS可以做到这一点，但使用jquery会更容易。下面是一个例子
$('.logo-btn').click(function() {
$('.logo-large').toggleClass('hide');
});nav {
height: 60px;
background: #f7f7f7;
display: flex;
align-items: center;
}
nav > span {
height: 100%;
display: flex;
align-items: center;
background: #2b2b2b;
width: fit-content;
padding: 0 40px;
color: white;
font-size: 1.2em;
transition: all 500ms ease;
white-space: nowrap;
}
.hide {
width: 0;
padding: 0;
opacity: 0;
}
button {
margin-left: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<span>CT</span>
<span class="logo-large">Creative Tim</span>
<button class="logo-btn">click me</button>
</nav>
当然，您可以尝试并调整CSS以使动画更流畅。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51938476
复制相关文章
相似问题