当窗口缩放时,图像左右移动

时间:2017-02-21 06:40:13

标签: jquery html css css3

正如标题所说,当我从全屏缩放页面时,我注意到背景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;

}

1 个答案:

答案 0 :(得分:1)

将以下内容添加到css中,图像将缩小以适合容器。

img {
  max-width:100%
}