正如标题所说,当我从全屏缩放页面时,我注意到背景divs scale,但是图像上下移动并且不缩小以保持在背景div / wrapper div内部它们只是有点重叠彼此。我如何让他们与他们的div一起移动?
此外,当用户在手机或平板电脑上时,我将使用jquery删除图像,然后将背景div移动到宽度方向。我只知道如何用CSS中的jQuery删除图像,那么有没有办法将图像移动到CSS文件?
另外,关于清理我的代码的指示非常受欢迎。
* Hostname was NOT found in DNS cache
* Trying 173.0.82.78...
* Connected to api.sandbox.paypal.com (173.0.82.78) port 443 (#0)
* successfully set certificate verify locations:
* CAfile: none
CApath: /etc/ssl/certs
* SSL connection using TLSv1.2 / AES256-SHA256
* Server certificate:
* subject: C=US; ST=California; L=San Jose; O=PayPal, Inc.; OU=PayPal Production; CN=api.sandbox.paypal.com
* start date: 2016-01-13 00:00:00 GMT
* expire date: 2018-01-13 23:59:59 GMT
* issuer: C=US; O=Symantec Corporation; OU=Symantec Trust Network; CN=Symantec Class 3 Secure Server CA - G4
* SSL certificate verify ok.
> POST /v1/payments/payment/PAY-6KY19646FF321593HLCVRQSY HTTP/1.1
Host: api.sandbox.paypal.com
Accept: */*
Authorization: Bearer MY_TOKEN_HERE
Content-Type: application/json; charset=utf-8
Expect: 100-continue
< HTTP/1.1 500 Internal Server Error
< Date: Tue, 21 Feb 2017 06:38:03 GMT
* Server Apache is not blacklisted
< Server: Apache
< paypal-debug-id: 217b14fc80976
< Connection: close
< X-SLR-RETRY: 500
< X-SLR-RETRY-API: /v1/payments/payment/{id}
< Connection: close
< Paypal-Debug-Id: 217b14fc80976
< Set-Cookie: X-PP-SILOVER=name%3DSANDBOX3.API.1%26silo_version%3D1880%26app%3Dplatformapiserv%26TIME%3D1273015128%26HTTP_X_PP_AZ_LOCATOR%3D; Expires=Tue, 21 Feb 2017 07:08:03 GMT; domain=.paypal.com; path=/; Secure; HttpOnly
< Set-Cookie: X-PP-SILOVER=; Expires=Thu, 01 Jan 1970 00:00:01 GMT
< Vary: Authorization
< Content-Length: 196
< Content-Type: text/xml;charset=UTF-8
<
* Closing connection 0
GOT:
"HTTP/1.1 500 Internal Server Error
Date: Tue, 21 Feb 2017 06:38:03 GMT
Server: Apache
paypal-debug-id: 217b14fc80976
Connection: close
X-SLR-RETRY: 500
X-SLR-RETRY-API: /v1/payments/payment/{id}
Connection: close
Paypal-Debug-Id: 217b14fc80976
Set-Cookie: X-PP-SILOVER=name%3DSANDBOX3.API.1%26silo_version%3D1880%26app%3Dplatformapiserv%26TIME%3D1273015128%26HTTP_X_PP_AZ_LOCATOR%3D; Expires=Tue, 21 Feb 2017 07:08:03 GMT; domain=.paypal.com; path=/; Secure; HttpOnly
Set-Cookie: X-PP-SILOVER=; Expires=Thu, 01 Jan 1970 00:00:01 GMT
Vary: Authorization
Content-Length: 196
Content-Type: text/xml;charset=UTF-8
<ns1:XMLFault xmlns:ns1="http://cxf.apache.org/bindings/xformat"><ns1:faultstring xmlns:ns1="http://cxf.apache.org/bindings/xformat">java.lang.NullPointerException</ns1:faultstring></ns1:XMLFault>"
html, body{
margin: auto;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
body{
background: #4a525e;
max-height: 950px;
font-family: Barrio;
}
div{
margin: auto;
}
#container{
padding-bottom: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
text-align: center;
}
.wrapper{
image-rendering: auto;
}
.beastboy{
background: #84C303;
width: 20%;
height: 950px;
float: left;
margin-right: auto;
margin-left: auto;
}
.beastboy img{
image-rendering: auto;
padding-top: 75%;
margin: auto;
}
.starfire{
background: #AC9C01;
width: 20%;
html, body{
margin: auto;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
body{
background: #4a525e;
max-height: 950px;
font-family: Barrio;
}
div{
margin: auto;
}
#container{
padding-bottom: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
text-align: center;
}
.wrapper{
image-rendering: auto;
}
.beastboy{
background: #84C303;
width: 20%;
height: 950px;
float: left;
margin-right: auto;
margin-left: auto;
}
.beastboy img{
image-rendering: auto;
padding-top: 75%;
margin: auto;
}
.starfire{
background: #AC9C01;
width: 20%;
height: 950px;
float: left;
margin-right: auto;
margin-left: auto;
}
.starfire img{
padding-top: 15%;
padding-left: -50px;
}
答案 0 :(得分:1)
将以下内容添加到css中,图像将缩小以适合容器。
img {
max-width:100%
}