热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

保持背景图像的长宽比-Maintainaspectratioofbackground-image

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的时候,它会变形到容器的大小。

foo

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。


推荐阅读
author-avatar
三八xuan_624
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有