0

我想在html中做一个简单的事情，但没有找到解决方案。也许你可以帮助我。

我有一个空的网站 () 并想将图像放在页面中间（垂直和水平）。那里有很多解决方案，它们通过图像的大小来计算位置。问题是，我想让图像的大小取决于本地屏幕分辨率。

图像应始终填充屏幕宽度的 70%，高度应保持成比例。即使用户调整浏览器窗口的大小。

最好是使用 div 和 css 的解决方案，但如果需要，表格和 html 格式也可以。

4

3 回答 3

1

你能有绝对的图像位置吗？因为它是动态图像大小，所以您需要一些 jquery 帮助。要正确调整图像大小：

img {
    display: block;
    height: auto;
    margin: 0 auto;
    width: 70%;
}

使用 jQuery：

$(document).ready(function() {
    img_adjust($('img'));

    $(window).resize(function() {
       img_adjust($('img'));
    });
});

function img_adjust(image_obj) {
   var window_height = $(window).height();
   var image_height = image_obj.outerHeight();
   var margin_top = (window_height - image_height) / 2;

   image_obj.css('margin-top', margin_top + 'px');
}

这是一个实际示例：http: //jsfiddle.net/b4ttq/

于 2013-07-26T17:14:26.330 回答
0

如果你在没有任何 javascript 的情况下这样做，那么你将无法垂直居中图像，你就是不能。这是我能想到的最好的纯 html-css 解决方案。下面的代码会将图片大小调整为宽度、高度的70%，并设置图片距离顶部30%；
html:

<div id='block'>&nbsp;</div>
<div id='pic'>
   <img id='img' src='https://www.google.com/images/srpr/logo4w.png' />
</div>

CSS：

 #block{
        height:30%;
        display: block;
    }
    #pic{
        display: block;
        width: 70%;
        margin-left: auto;
        margin-top: auto;
    }
    #img{
        width: 70%;
    }
于 2013-07-26T19:34:56.547 回答
-1

取一个宽度为 70% 的 div，左边距为 15%！使您的容器居中..相应地对高度做同样的事情！要适应图像大小，请提供一个 cssimg {max-width:100%; height:auto;} 应该这样做..

于 2013-07-26T17:14:40.223 回答