css怎么让div的高度随着宽度按比例缩放

2023-04-24 16:58:02html-css031

css怎么让div的高度随着宽度按比例缩放,第1张

常用的方法是通过背景图示的cover属性让div的高度随着宽度按比例缩放

#banner .bd li {

width: 100%

background-repeat:

no-repeat

background-size: cover

background-position: center

background-position: 50% 50%

-webkit-background-size:

100%

padding-: 42%

}

‍

C#怎么让控制元件随窗体按比例缩放？

你可否换个事件写缩放程式码？放到载入里面去

cad家俱怎么按比例缩放

操作步骤如下：

命令: sc

SCALE

选择物件: 指定对角点: 找到 1 个

选择物件:

指定基点:

指定比例因子或 [复制(C)/参照(R)]: 2 (比例）

如何按比例缩放UIImageView

CAXA比例是非常方便的，你可以直接输入号码，你可以输入一个表示式，如取两件事情的长度扩大到5，输入比例因子：5/2，就可以了，这种方法并不特别适合知识这种情况放大系数。

按比例缩放需要用程式来完成，可以参照下面的程式：

@interface HYShowImageView : UIScrollView <UIScrollViewDelegate>

显示影象大图

-(void)showImage:(UIImage*)image inView:(UIView *)parentsView fromRect:(CGRect)rect

@end

-(void)showImage:(UIImage*)image inView:(UIView *)parentsView fromRect:(CGRect)rect

{

_oldRect = rect

[self setFrame:CGRectMake(0, 0, PHOTOWIDTH, PHOTOHEIGHT)]

self.showsHorizontalScrollIndicator = NO

self.showsVerticalScrollIndicator = NO

UIImageView *showView = [[UIImageView alloc] initWithFrame:_oldRect]

showView.contentMode = UIViewContentModeScaleAspectFit

[UIView animateWithDuration:0.5f animations:^{

[showView setFrame:CGRectMake(0, 0, PHOTOWIDTH, PHOTOHEIGHT)]

}]

[self setBackgroundColor:color_with_rgba(0, 0, 0, 1)]

[parentsView addSubview:self]

[showView setTag:'show']

[showView setImage:image]这个地方也可以用网路的图片

[self addSubview:showView]

增加两个手势

showView.userInteractionEnabled = YES

UITapGestureRecognizer* singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleViewTap:)]

[self addGestureRecognizer:singleTap]

UIPinchGestureRecognizer* pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchView:)]

[self addGestureRecognizer:pinchGesture]

}

增加了两个手势，一个点选取消，一个缩放

移除图片检视检视

-(void)handleSingleViewTap:(UITapGestureRecognizer *)sender

{

[self setZoomScale:1.0 animated:NO]

[UIView animateWithDuration:0.5f animations:^{

UIImageView *showView = (UIImageView *)[self viewWithTag:'show']

showView.frame = _oldRect

self.backgroundColor = color_with_rgba(0, 0, 0, 0.0)

} pletion:^(BOOL finished){

[self removeFromSuperview]

}]

}

缩放图片

-(void)handlePinchView:(UIPinchGestureRecognizer *)sender

{

UIImageView *imageView = (UIImageView *)[self viewWithTag:'show']

if ([sender state] == UIGestureRecognizerStateBegan) {

_imageHWScale = imageView.image.size.height/imageView.image.size.width

_beganScale = self.zoomScale

}

[self setZoomScale:_beganScale * sender.scale]

if ([sender state] == UIGestureRecognizerStateEnded) {

[self scrollViewEnd]

}

- (void)scrollViewEnd

{

if (self.zoomScale <1.0) {

[self setZoomScale:1.0 animated:YES]

self.contentOffset = CGPointMake(0, 0)

} else if (self.zoomScale >3.0) {

[self setZoomScale:3.0 animated:YES]

}

把UIImageView放到UIScrollView中，将UIScrollViewDelegate中的- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView方法return这个imageView

js实现div盒子宽度和高度成比例缩放怎么写

说一下思路：

等比例就是要找出宽高的比。如果100/80

然后在缩放时，先缩放一个，然后用已知的宽高比算另一个值。

有几个方法，各有优劣你自己斟酌，部分也说不细需要你自己百度具体做法：

定死宽高中的一个，另一个未定死的数值就会按比例来，如果多了overflow切掉，好处是容易操作，兼容性好，坏处很多，图片内容不能全部展示、可能切掉希望展示的内容只适用于很少情况。

设为背景图使用css3的background-size配合background-position来解决，contain和cover两个值效果不错，基本能解决你想要的所有效果，缺点是不兼容低版本浏览器、需要通过内联css样式解决、不是img标签浏览器搜索引擎不友好、不符合HTML语义化标准。

使用css3的flex定位，网上有具体的操作，一时说不明白都是用得到的时候自己去搜。好处是完全语义化符合标准，基本能解决你的问题，缺点是，学习成本高，兼容性稍差，有些手机上表现有问题。

js方案，都js了自己写就是了。缺点是需要用js，写不好会有bug，相对麻烦一些，加载时候页面可能会有抖动。

服务器方案，客户上传的图片到服务器走一圈，做成自己希望的大小，而且有一个服务器插件不仅可以截取到目的大小而且还能针对图片内容截取（例如尽可能保留人物面部、智能判断页面重点），这个试过效果很不错，不过具体哪个插件不记得了，估计搜也能搜到。优点是比较智能自己设置好了几乎完美，几乎不再需要麻烦的css，页面也相对比较规整，缺点是需要服务器端支持。

如果可以比拘泥于容器，让容器兼容图片，网上有很多的gallery插件，类似谷歌图片，摆布也不错，优点是不用考录图片和div的问题了，缺点是需要从新设计及相关技术....

随着智能手机的增多，手机网站也可以做的更加个性化，最近在改版自己的手机网站

这其中，遇到了网站图片尺寸问题，手机屏幕都比较小，怎么让上传的规则不一的图片在手机上显示的更加美观呢？

那就利用css的强大功能吧。

先附上代码：

img

{

max-width:500px

myimg:expression(onload=function(){

this.style.width=(this.offsetWidth

500)?”500px”:”auto”}

)