个人中心
gpt4 book ai didi

CSS 和图像错误 - 不显示图像

转载 作者：行者123 更新时间：2023-11-28 13:00:57 25 4
gpt4 key购买 nike

我在尝试定位我的图像时遇到了一个小问题，它没有按我想要的方式显示，我已经寻找答案几个小时了。我希望我的图片显示为箭头指向: enter image description here我希望这张图片的宽度为 100%，但我无法让它看起来像我想要的那样。我可以比较它的壁橱看起来像是 facebook 封面图片(顶部的菜单，一个大图像和一些小的 soundclouds 和 facebook，就像我已经拥有的一样；))。对不起我的英语 :s

---- 我的 html(抱歉，如果它不可读，我会根据要求复制和上传所有内容)----

<html>
<head>
<link rel="stylesheet" id="default-css" href="default.css" type="text/css" media="all">
</head> 
<div id="cover-image" class="clearfix"></div>
<footer id="site-footer">
<iframe  width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916"></iframe>

<object height="81" width="100%"> 
    <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&amp;show_comments=true&amp;auto_play=false&amp;color=343538&amp;theme_color=343538&amp;show_user=true&amp;show_bmp=true&amp;show_artwork=true&amp;show_bmp=true"></param> 
<param name="allowscriptaccess" value="transparent"></param> 
<embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&amp;show_comments=true&amp;auto_play=false&amp;color=343538&amp;theme_color=34353&amp;show_user=true&amp;show_bmp=true&amp;show_artwork=true&amp;show_bmp=true" 
    type="application/x-shockwave-flash" width="100%"></embed>
</object>
- Control areal -
<div class="plugin_example" id="u_0_9"><div data-href="http://www.facebook.com/DjSalling"data-send="true" data-show-faces="true" data-colorscheme="dark" class="fb-like >dark_background fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml->state="rendered><span width="100%" height="61"><iframe id="f30076c07" name="f2303a14a8" scrolling="no" style="border: none; overflow: hidden; height: 61px; width: 100%;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=113869198637480&amp;locale=da_DK&amp;sdk=joey&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D22%23cb%3Df20c4c7538%26origin%3Dhttp%253A%252F%252Fdevelopers.facebook.com%252Ff5cc88ac%26domain%3Ddevelopers.facebook.com%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fwww.facebook.com%2FDjSalling&amp;node_type=link&amp;width=450&amp;layout=standard&amp;colorscheme=dark&amp;show_faces=true&amp;send=true
&amp;extended_social_context=false"></iframe></span></div></div>
</footer>
</body>
</html>

---- CSS ----

#cover-image {
      background-image: url(background_cover.jpg);
      background-repeat: no-repeat;
      background-position: left top;
        }

#site-footer { position: relative; 
    position: absolute: bottom;
    background: url(footer-divider.png) center top no-repeat;
    background-size: 100%;
    margin: 0px 0 200px 0;
    padding: 27px 0 0;
    clear: both;
        }

    #inner-footer { 
    position: absolute;
    bottom: 0;
    left: 0; 
        }

        #inner-footer .content {
            color: #bcbcbc;
            background: #272729;
            background: rgba(0,0,0, 0.15);
            background-repeat: no-repeat;
            padding: 10px;

            height: 72px;

            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

谢谢大家:)

编辑:

@3rror404 谢谢，但我的宽度是多少才能达到 100%，这样图像缩放会根据您的浏览器大小移动并自动缩小比方说 2560x1600？

#cover-image {
    width: 100%;
    height: 400px;
    background-image: url(background_cover.jpg);
    background-repeat: no-repeat;
    background-position: left top;

现在的高度是 400xp 但还不够近，无法看到整个图片

正如您在此处看到的，宽度有效，高度无效

@Kamal 我使用了你的 css，但是当我来回拖动我的浏览器窗口时，我可以看到图像被截断了，而在一个狭窄的浏览器窗口中，从音云到图片之间有很大的空间。

最佳答案

我不太确定我是否遵循了您的问题。但是您的意思是您设置为背景属性的图像应该缩放到容器的宽度吗？

#cover-image {
width: 100%;
height: 400px;
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-size:100%;
background-position: left top;

应该使您的背景图像宽度适合容器宽度。这就是您要找的吗？

关于CSS 和图像错误 - 不显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16157169/

25 4 0
文章推荐： ios - 带有 Parse 对象的 Swift Update 标签
文章推荐： html - 如何使用 css 在框中定位文本？
文章推荐： javascript - 使用 VBA 搜索网站
文章推荐： ios - Swift 中奇怪的导航栏/状态栏行为
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com