如何解决向右移动gif图像
我一直在使用简单的html和css创建新的网页。它只是一个渐变背景,前面带有gif。该gif最近给我带来了很多痛苦,因为它一直向右移动并扩大了屏幕。我只是想让gif完美居中,并且尺寸合适,而不是桌面版本看起来理想,但移动版本看起来如此小,如下图所示,我希望gif能够更宽并且在不扩展屏幕的情况下感觉更多。
我的HTML如下
a,a:focus,a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,.btn-default:hover,.btn-default:focus {
color: #333;
text-shadow: none;
/* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,body {
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,.5);
background: radial-gradient( circle closest-side,#d5c83d 80%,#e9e5bf,#8482e3);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
/*height: 100%; */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 20px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav>li {
display: inline-block;
}
.masthead-nav>li+li {
margin-left: 20px;
}
.masthead-nav>li>a {
padding-right: 0;
padding-left: 0;
font-size: 30px;
font-weight: bold;
color: #fff;
/* IE8 proofing */
color: rgba(255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav>li>a:hover,.masthead-nav>li>a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,.25);
}
.masthead-nav>.active>a,.masthead-nav>.active>a:hover,.masthead-nav>.active>a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 2);
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Affix and center
*/
@media screen and (max-width: 992px) {}
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="container">
<div class="masthead clearfix">
<div class="container inner">
<h3 class="masthead-brand"></h3>
<nav>
<ul class="nav masthead-nav">
<li class="active"><a href="">Home*</a></li>
<li><a href="magazine">Magazine#</a></li>
<li><a href="#">Abouti</a></li>
</ul>
</nav>
</div>
</div>
<div class="innercover">
<img class="img" src="https://static.tumblr.com/y8b11bc/u05qfybi7/ezgif.com-resize.gif" ; style=" top: 0%; width: 100%; max-height: 100%; " ;></img>
</div>
解决方法
调整css代码以更改GIF的大小,具体取决于它是移动设备还是台式机。此外,请调整保存GIF的div以使各项居中。
@media (min-width: 768px) {
.img{
width: X%
}
.innercover{
display: flex;
justify-content: center;
align-items: center;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。