Question

我在定位和照片大小调整方面遇到了麻烦。这是图片：

enter image description here

1个块 - 它是一张照片，应始终可见（无滚动条！），2和3块大小取决于窗口大小。我该怎么做？

Answer 1

如果使用CSS放置和居中图像，可以使用最小宽度和最大宽度，但我不知道如何垂直放置。

可能是JavaScript / jQuery脚本。

Answer 2

刚开场。

试试这个。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
   $(document).ready(function() {
     $photoheight = $('.photo').css('width');
     $('.photo').css('height', $photoheight);
     $(window).resize(function(){
       $photoheight = $('.photo').css('width');
       $('.photo').css('height', $photoheight);

       });
     });
</script>
<style>
.photo {
        min-width:200px;
        width:25%; 
        max-width:400px;
        background-image:url('http://4.bp.blogspot.com/-KWHpPk4f-kM/TdZY_dxWMRI/AAAAAAAAADc/6FHVzBLY-4o/s1600/flower-1.jpg');
        background-position:center center;}
</style>


<body>
<div class="photo"></div>

</body>
</html>

Css定位和照片大小调整

2 个答案: