image图片拉伸

//iOS5以前设置拉伸图片

-(void)loadImageBeforeIOS5{

    //35*30

    UIButton *nextButton = [[UIButton alloc] initWithFrame:CGRectMake(80, 180, 100, 40)];

    [nextButton setTitle:@"iOS5之前" forState:UIControlStateNormal];

    nextButton.layer.borderColor=[[UIColor redColor] CGColor];

    nextButton.layer.borderWidth=1.0f;

    UIImage *image = [UIImage imageNamed:@"Question"];

    // 设置左边端盖宽度  rightCap=width - leftCapWidth - 1

    NSInteger leftCapWidth = image.size.width * 0.5;

    // 设置上边端盖高度  bottom=height - topCapWidth - 1

    NSInteger topCapHeight = image.size.height * 0.5;

    UIImage *newImage = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];

    [nextButton setBackgroundImage:newImage forState:UIControlStateNormal];

    [self.view addSubview:nextButton];

}

//iOS5 拉伸图片

-(void)loadImageIOS5{

     UIImage *image = [UIImage imageNamed:@"Question"];

    UIButton  *resizableButton=[[UIButton alloc]initWithFrame:CGRectMake(80, 250, 100, 40)];

    [resizableButton setTitle:@"iOS5" forState:UIControlStateNormal];

    // 设置端盖的值

    CGFloat top = image.size.height * 0.5;

    CGFloat left = image.size.width * 0.5;

    CGFloat bottom = image.size.height * 0.5;

    CGFloat right = image.size.width * 0.5;

    

    UIEdgeInsets edgeInsets = UIEdgeInsetsMake(top, left, bottom, right);

    

    // 拉伸图片

    UIImage *edgeImage = [image resizableImageWithCapInsets:edgeInsets];

    

    // 设置按钮的背景图片

    [resizableButton setBackgroundImage:edgeImage forState:UIControlStateNormal];

    [self.view addSubview:resizableButton];

}

//iOS6 拉伸图片

-(void)loadImageAfterIOS6{

    UIImage *image = [UIImage imageNamed:@"Question"];

    UIButton  *resizableButtonMode=[[UIButton alloc]initWithFrame:CGRectMake(80, 320, 180, 400)];

    [resizableButtonMode setTitle:@"iOS6" forState:UIControlStateNormal];

    [resizableButtonMode addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];

    // 设置上左下右边距

    CGFloat topMode= image.size.height * 0.5;

    CGFloat leftMode= image.size.width * 0.5;

    CGFloat bottomMode= image.size.height * 0.5;

    CGFloat rightMode= image.size.width * 0.5;

    

    UIEdgeInsets edgeInsetsMode= UIEdgeInsetsMake(topMode, leftMode, bottomMode, rightMode);

    

    // 拉伸图片

    UIImage *edgeModeImage = [image resizableImageWithCapInsets:edgeInsetsMode resizingMode:UIImageResizingModeStretch];

//    UIImage *edgeModeImage = [image resizableImageWithCapInsets:edgeInsetsMode resizingMode:UIImageResizingModeTile];

    

    //设置图片

    [resizableButtonMode setBackgroundImage:edgeModeImage forState:UIControlStateNormal];

    [self.view addSubview:resizableButtonMode];

}

转载于:https://www.cnblogs.com/daxueshan/p/6269181.html

### 使用 CSS 防止图片拉伸 为了防止图片在调整尺寸时被拉伸,可以通过 `object-fit` 属性实现。该属性允许指定可替换元素的内容应该如何适应其容器的框大小[^4]。 #### 方法一:使用 `object-fit` 通过设置 `object-fit: cover;` 或其他值(如 `contain`, `fill`, `none`, 和 `scale-down`),可以有效控制 `<img>` 标签中的图片如何填充其容器而不失真: ```css .img-container { width: 300px; height: 200px; } img { width: 100%; height: 100%; object-fit: cover; /* 图片保持比例并裁剪 */ } ``` 上述代码中,`object-fit: cover;` 将确保图片按原始比例缩放,并覆盖整个容器区域,超出部分会被裁切掉。 #### 方法二:利用伪类叠加效果 如果希望进一步增强视觉体验,比如给图片添加半透明遮罩层,则可以采用如下方法[^3]: ```css .hero { position: relative; display: inline-block; } .hero img { display: block; width: 100%; height: auto; object-fit: cover; } .hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); pointer-events: none; } ``` 这里 `.hero::after` 创建了一个全屏覆盖的效果,而不会干扰到实际的图片显示逻辑。 #### 处理多背景的情况 当涉及到多个背景图时,也可以借助 `background-size` 来单独定义每张背景图的比例关系[^1]: ```css .element { background-image: url('cool-1.jpg'), url('cool-2.jpg'); background-size: contain, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } ``` 此配置下两张背景图分别按照设定好的方式呈现——前者完全可见(`contain`)后者则填满整个空间(`cover`)。 注意,在现代浏览器支持良好的前提下推荐优先选用 `object-fit` 解决方案因为它更直观易懂同时也提供了更多灵活性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值