I'm currently working of the mobile version of a website and I want all images to fill 90% of the screen width. I think the best technique to achieve this is creating a div for every image which is using the image as background-image. The problem is that I don't know how to match the height of the div with the aspect ratio of the image. I have tried to set width: 90% and height: auto but it didn't worked.
我目前正在使用移动版网站,我希望所有图像都能填满90%的网页宽度。我认为实现这一目标的最佳技术是为每个使用图像作为背景图像的图像创建一个div。问题是我不知道如何将div的高度与图像的纵横比相匹配。我试图设置宽度:90%和高度:自动,但它没有工作。
Could you please help me? Lennart
你可以帮我吗?伦纳特
2 个解决方案
#1
3
I don't know if I might be getting the question wrong, but I don't understand why you want to use background images?
我不知道我是否会错误地提出问题,但我不明白你为什么要使用背景图片?
If you use a regular img-Tag, the image will keep its aspect ratio if you set it to width: 90% height: auto
如果使用常规img-Tag,如果将图像设置为宽度,图像将保持其宽高比:90%height:auto
Other than that you can keep the aspect ratio of a div-container by setting a padding-top to a percentage on a wrapper-div. That works because the percentage is calculated dependend on the width of the div. See more here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
除此之外,您可以通过在wrapper-div上设置padding-top为百分比来保持div容器的宽高比。这是有效的,因为百分比的计算取决于div的宽度。在此处查看更多信息:http://www.mademyday.de/css-height-equals-width-with-pure-css.html
#2
4
You have an option in CSS called background-size with the option cover:
CSS中有一个名为background-size的选项,选项封面:
background-size: cover;
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom. The image is automatically centered unless over-ridden by another property such as background-position.
与contains相反的关键字。尽可能大地缩放图像并保持图像宽高比(图像不会被压扁)。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时,图像被左/右或上/下剪裁。除非被其他属性(例如背景位置)覆盖,否则图像会自动居中。
#1
3
I don't know if I might be getting the question wrong, but I don't understand why you want to use background images?
我不知道我是否会错误地提出问题,但我不明白你为什么要使用背景图片?
If you use a regular img-Tag, the image will keep its aspect ratio if you set it to width: 90% height: auto
如果使用常规img-Tag,如果将图像设置为宽度,图像将保持其宽高比:90%height:auto
Other than that you can keep the aspect ratio of a div-container by setting a padding-top to a percentage on a wrapper-div. That works because the percentage is calculated dependend on the width of the div. See more here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
除此之外,您可以通过在wrapper-div上设置padding-top为百分比来保持div容器的宽高比。这是有效的,因为百分比的计算取决于div的宽度。在此处查看更多信息:http://www.mademyday.de/css-height-equals-width-with-pure-css.html
#2
4
You have an option in CSS called background-size with the option cover:
CSS中有一个名为background-size的选项,选项封面:
background-size: cover;
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom. The image is automatically centered unless over-ridden by another property such as background-position.
与contains相反的关键字。尽可能大地缩放图像并保持图像宽高比(图像不会被压扁)。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时,图像被左/右或上/下剪裁。除非被其他属性(例如背景位置)覆盖,否则图像会自动居中。