[英]Maintain aspect ratio of background-image
I need to present images in a container using the CSS property background-image
我需要使用CSS属性
background-image
在容器中显示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. 这里的问题是我需要呈现保持其纵横比的每个图像,并最大化图像的呈现到容器内部的图像的
height
或width
。
HTML: HTML:
<div class="fotowind shadow"></div>
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:
<div class="fotowind shadow" style="background-image: url(http://localhost/AdPictures/25/2c/c2/4c/-9/77/1-/4b/77/-b/ff/a-/57/e5/10/2b/31/b1/7516_1_xl.jpg); background-size: 100%; width: 950px; height: 650px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></div>
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
,它会变形为容器尺寸。
As I saw that you are already using jQuery, so I assume that you are open to jQuery solution, because, as I read your comment which says 当我看到你已经在使用jQuery时,我假设你对jQuery解决方案持开放态度,因为,当我读到你的评论时,
I want to center the
background-image
if the viewport size exceeds the original image size, and if it's equal to or less than the real size, than you want a responsive background如果视口大小超过原始图像大小,并且它等于或小于实际大小,我希望将
background-image
居中,而不是您想要的响应背景
So here, I am using jQuery to detect the windows height
and width
and accordingly am resizing your background-image
所以在这里,我使用jQuery来检测窗口的
height
和width
,因此调整了background-image
大小
$(window).on('resize', function() {
if($(window).width() < 300) { //original idth of your background image
$('div.fotowind').css('background-size', '100% auto');
} else if($(window).height() < 300) { //original height of your background image
$('div.fotowind').css('background-size', 'auto 100%');
} else {
$('div.fotowind').css('background-size', 'auto');
}
});
There is no CSS solution as such because we don't have max-width
and max-height
for background-size
so if you are looking for a pure CSS solution, than you will need an absolute
positioned img
tag, with max-height
and max-width
defined with a z-index
set to negative, but still you will face some issues regarding the element center positioning... 没有CSS解决方案因为我们没有
background-size
max-width
和max-height
所以如果你正在寻找一个纯CSS解决方案,那么你将需要一个absolute
定位的 img
标签, max-height
和使用z-index
设置为负定义的max-width
,但是您仍然会遇到有关元素中心定位的一些问题...
After you commented , you said that the images will be dynamic in dimensions, and the container will be fixed so.. 在您评论之后 ,您说图像在尺寸上将是动态的,并且容器将被修复以便...
Here, now the code is completely compatible with your fixed width
container elements.. you need to do nothing now and it's completely dynamic, also thanks to this answer which helped me to fetch the height
and width
of the image 在这里,现在代码与您的固定
width
容器元素完全兼容..您现在无需任何操作,它完全是动态的,这也要归功于这个答案帮助我获取图像的height
和width
$(document).on('ready', function() {
var image_url = $('div.fotowind').css('background-image'), image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
image.src = image_url;
}
// just in case it is not already loaded
$(image).load(function () {
imgwidth = image.width;
imgheight = image.height;
if($('div.fotowind').width() < imgwidth) {
$('div.fotowind').css('background-size', '100% auto');
} else if($('div.fotowind').height() < imgheight) {
$('div.fotowind').css('background-size', 'auto 100%');
} else {
$('div.fotowind').css('background-size', 'auto');
}
});
});
Few demos to illustrate the above code in action... 很少有演示来说明上面的代码在行动......
Demo 1 (Where image size > than the elements size) 演示1 (图像大小>比元素大小)
Demo 2 (Where container size > image size) 演示2 (容器尺寸>图像尺寸)
Demo 3 (Where image height > container height) 演示3 (图像高度>容器高度)
Demo 4 (Where image height > container height [2]) 演示4 (图像高度>容器高度[2])
Demo 5 (Where image width > container width) 演示5 (图像宽度>容器宽度)
You can use background-size: cover
您可以使用
background-size: cover
body { margin: 0 } .fotowind { background: url(//placehold.it/400) fixed no-repeat center / cover; min-height: 100vh /*demo purposes*/ }
<div class="fotowind shadow"> </div>
I tried to propose two different solution, one with a background-image and the other one with an image tag. 我试图提出两个不同的解决方案,一个带有背景图像,另一个带有图像标签。
Here is the code: 这是代码:
HTML HTML
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Mei_Foo_Station_2.JPG" alt="foo" />
<div class="bg"></div>
<div class="bg bg_h_s"></div>
<div class="bg bg_h_m"></div>
<div class="bg bg_h_l"></div>
<div class="bg bg_w_s"></div>
<div class="bg bg_w_m"></div>
<div class="bg bg_w_l"></div>
</div>
CSS CSS
.container {
text-align: center;
background-color: grey;
}
.bg {
background: url(https://upload.wikimedia.org/wikipedia/commons/e/e2/Mei_Foo_Station_2.JPG) no-repeat center center blue;
-webkit-background-size: contain;
background-size: contain;
height: 480px
}
img, .bg {
width:100%;
max-width:640px;
margin: 30px auto;
}
.bg_h_s {
height:100px;
}
.bg_h_m {
height:200px;
}
.bg_h_l {
height:300px;
}
.bg_w_s {
width:200px;
}
.bg_w_m {
width:400px;
}
.bg_w_m {
width:600px;
}
Here is the working codepen 这是工作的codepen
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.