html - Css 定位和照片大小调整

标签 html css

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

enter image description here

1 block - 这是一张照片,应该始终可见(没有滚动条!),2 和 3 block 大小取决于窗口大小。我应该怎么做?

最佳答案

刚玩过。

试试这个。

<!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>

关于html - Css 定位和照片大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9111502/

相关文章:

javascript - 从 javascript 函数计算复选框数量

javascript - 你如何在 VueJS 中实现 "double click to edit todo task"?

html - 如何消除父div和里面列表之间的差距

jquery - 修改对话框的 CSS(宽度)

html - 全屏部分页面

html - 在 Laravel 6.0 之前工作的背景图片不显示

html - h1 拒绝嵌套在 div 中

html - 修复 css,使其相对于它的子项(/responsive)

javascript - 使用javascript全局更改h1标签的颜色

html - 当您在 css 中调整响应式网格大小时,某些图像会被隐藏