在窗口调整大小时缩小图像比例

时间:2017-09-14 21:14:11

标签: html css html5 css3 responsive-design

大家好我将背景图像设置为背景,我想要它,以便当用户缩小窗口时,它会调整大小:

HTML:

<div class="parallax">
  </div>

CSS:

.parallax {
  background-image: url("../Images/back1.jpg");
  min-height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 20px;
}

当我改变background-size: cover; to contain时,我开始工作了,但它从左侧和右侧切下了一些图像。

小提琴链接:here

由于

2 个答案:

答案 0 :(得分:2)

除了我的评论之外,以下是我在上一条评论中所写的内容 - 包含imgwidth: 100%的常规height: auto代码,而不是背景图片:

&#13;
&#13;
img {
  width: 100%;
  height: auto;
}
&#13;
<div>
  <img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

#import "userSetUp.h" #import <GoogleSignIn/GoogleSignIn.h> @import GoogleAPIClientForREST; @implementation userSetUp NSString *folderID; -(id) initWithDriveService:(GTLRDriveService *)driveService{ self = [ super init]; if(self){ self.driveService = driveService; } return self; } - (void) initSetup{ GTLRDrive_File *metadata = [GTLRDrive_File object]; metadata.name = @"AName"; metadata.mimeType = @"application/vnd.google-apps.folder"; GTLRDriveQuery_FilesCreate *query = [GTLRDriveQuery_FilesCreate queryWithObject:metadata uploadParameters:nil]; query.fields = @"id"; [_driveService executeQuery:query completionHandler:^(GTLRServiceTicket *ticket, GTLRDrive_File *file, NSError *error) { if (error == nil) { folderID = file.identifier; //[self shareToDrive:file.identifier]; //printf("the folder id is" + file.identifier ) [self uploadToFolder: file.identifier]; NSLog(@" FOLDER File ID %@", file.identifier); } else { NSLog(@"An error occurred: %@", error); } }]; } - (void) uploadToFolder:(NSString *) folderId { NSString *filePath = [[NSBundle mainBundle] pathForResource:@"apple" ofType:@"jpg"]; NSData *fileData = [NSData dataWithContentsOfFile:filePath]; GTLRDrive_File *metadata = [GTLRDrive_File object]; metadata.name = @"apple.jpg"; //metadata.mimeType = @"application/vnd.google-apps.document"; metadata.parents = [NSArray arrayWithObject:folderId]; GTLRUploadParameters *uploadParameters = [GTLRUploadParameters uploadParametersWithData:fileData MIMEType:@"image/jpeg"]; uploadParameters.shouldUploadWithSingleRequest = TRUE; GTLRDriveQuery_FilesCreate *query = [GTLRDriveQuery_FilesCreate queryWithObject:metadata uploadParameters:uploadParameters]; query.fields = @"id"; [_driveService executeQuery:query completionHandler:^(GTLRServiceTicket *ticket, GTLRDrive_File *file, NSError *error) { if (error == nil) { /** * *This is where the file id of the file gets sent to be shared * */ [self shareToDrive:file.identifier]; NSLog(@"File ID %@", file.identifier); } else { NSLog(@"An error occurred: %@", error); } }]; printf("uploaded image to folder"); } - (void ) shareToDrive:(NSString *) fileId{ GTLRBatchQuery *batchQuery = [GTLRBatchQuery batchQuery]; GTLRDrive_Permission *userPermission = [GTLRDrive_Permission object]; userPermission.type = @"user"; userPermission.role = @"reader"; userPermission.emailAddress = @"anEmail@gmail.com"; GTLRDriveQuery_PermissionsCreate *createUserPermission = [GTLRDriveQuery_PermissionsCreate queryWithObject:userPermission fileId:fileId]; createUserPermission.fields = @"id"; createUserPermission.completionBlock = ^(GTLRServiceTicket *ticket, GTLRDrive_Permission *permission, NSError *error) { if (error == nil) { printf("we out here"); NSLog(@"Permisson ID: %@", permission.identifier); } else { //printf("oh no an error!"); NSLog(@"An error occurred: %@", error); } }; [batchQuery addQuery:createUserPermission]; printf("file shared"); } @end window时,下面的代码也会使背景图像响应。我更新了您的resized代码,删除了css和后台min-height,并将fixed百分比置于顶部和底部。

padding
 .parallax {
  background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
  padding: 30% 0;
}