作者:三八xuan_624 | 来源:互联网 | 2023-06-13 17:51
IneedtopresentimagesinacontainerusingtheCSSpropertybackground-image我需要使用CSS属性background
I need to present images in a container using the CSS property background-image
我需要使用CSS属性background-image在容器中显示图像
The problem here is that I need to present every image keeping the aspect ratio of it, and maximize the presentation of the image to the height
or width
of the image centered inside the container.
这里的问题是,我需要呈现每个图像,保持图像的长宽比,最大限度地显示图像的高度或宽度,在容器内居中。
HTML:
HTML:
EDIT:
Initial CSS properties of the .fotowind
container:
fotowind容器的初始CSS属性:
.fotowind {
overflow:hidden;
margin-left:10px;
background:#333;
margin-bottom:5px;
z-index:30;
background-position: center center !important;
background-repeat: no-repeat;
}
Code to build the properties dynamically based in the size of the window - I need to resize the image keeping the ratio, even of some empty space as to remain on the sides:
代码根据窗口的大小动态构建属性——我需要调整图像的大小,保持比例,即使是一些空的空间,也要保持两边的比例:
jQuery:
jQuery:
windowWidth = $(window).width();
windowHeight = $(window).height();
if (windowWidth <= 1200 && windowWidth > 768 || windowHeight <900)
{
$('.fotowind').css('width', '650px').css('height', '425px');
}
else if (windowWidth > 1200 || windowHeight > 900)
{
$('.fotowind').css('width', '950px').css('height', '650px');
}
if (windowWidth <= 768)
{
$('.fotowind').css('width', '450px').css('height', '425px');
}
Resulting HTML:
结果HTML:
In some situations where an image has size 800x600
, for example, I can't present it with this size, or when the image has 200x650
, for example, it deforms to the container size.
在某些情况下,图像的大小是800x600,例如,我不能用这个大小来表示,或者当图像有200x650的时候,它会变形到容器的大小。