html - 如何在不变形的情况下获得比周围框更大的图片？-6ren

html - 如何在不变形的情况下获得比周围框更大的图片？

转载作者：太空宇宙更新时间：2023-11-04 08:28:57

25

4

我在学校有一个元素，我试图制作一个 flashgames 网站，但我遇到了一个问题。我希望图片比灰色框大。图片我想要它:https://prntscr.com/frvzyy

我的 html 代码:

    *{
    	margin: 0px;
    	background-color:darkred;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        padding-left: 30%;
        padding-right: 30%;
        overflow: hidden;
        background-color: gray;
    }
    
    li {
        float: left;
    }
    
    li a {
        display: block;
        font-family: Verdana, Helvetica, sans-serif;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    	background-color: darkred;
    }
    #logo {
        display: block;
        font-family: Verdana, Helvetica, sans-serif;
        background-color: black;
        text-align: center;
        padding: 10px 10px;
        text-decoration: none;
    }   
    
    li a:hover {
        background-color: black;
    }
    
    }
    p{font-family:Tahoma;}

    <!DOCTYPE html>
    <html>
    <head>
        <title>Games</title>
        <link rel="stylesheet" href="css/nav.css">
    </head>
        <ul>
            <li><a href="">Games</a></li>
            <li><a href="">1vs1 Games</a></li>
            <li id="logo"><img src="src/flash%20games%20logo.png" style="width:250px;"></li>
            <li><a href="">Categories</a></li>
            <li><a href="">About us</a></li>
    		
        </ul>
        <h1>Games</h1>
        <p>content bla bla</p>
    </html>

最佳答案

您需要进行一些更改才能实现这一目标。

*{
    margin: 0px;
    background-color:darkred;
}
.nav{
    height: 100px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    /*padding-left: 30%;
    padding-right: 30%;*/
    /*overflow: hidden;*/
    background-color: gray;
    height: 48px;
}

li {
    /*float: left;*/
    display: inline-block;
    vertical-align: top;
    margin: 0 -2px;

}

li a {
    display: block;
    font-family: Verdana, Helvetica, sans-serif;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: darkred;
}
#logo {
    /*display: block;*/
    font-family: Verdana, Helvetica, sans-serif;
    background-color: black;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}   
#logo img{
    display: block;
}

li a:hover {
    background-color: black;
}

}
p{font-family:Tahoma;}

    <div class="nav">
        <ul>
            <li><a href="">Games</a></li>
            <li><a href="">1vs1 Games</a></li>
            <li id="logo"><img src="https://s-media-cache-ak0.pinimg.com/originals/94/77/f9/9477f98e6d5154911c05467c4acb24c5.jpg" style="width:250px;"></li>
            <li><a href="">Categories</a></li>
            <li><a href="">About us</a></li>
        </ul>
    </div>
    <h1>Games</h1>
    <p>content bla bla</p>

希望对你有帮助:)

关于html - 如何在不变形的情况下获得比周围框更大的图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44925096/

25

4

0

文章推荐： java - hibernate 保存、 hibernate 回滚

文章推荐： c - 释放嵌套结构的指针时出现段错误

文章推荐： java - 动态添加项目到maven构建reactor？

文章推荐： c - 将数组(不是指针)传递给 c 中的结构

java - 在具有多个条件的 If 情况下，我们能否获得条件失败的确切位置？
我是 Java 新手，这是我的代码， if( a.name == b.name && a.displayname == b.displayname && a.linknam
javascript - 在下面的 JavaScript 情况下，如何避免重复自己的情况？
在下面的场景中，我有一个 bool 值。根据结果，我调用完全相同的函数，唯一的区别是参数的数量。 var myBoolean = ... if (myBoolean) { retrieve
c++ - 异常(exception)情况下，我想在没有任何堆栈展开的情况下进行调试
我是一名研究 C++ 的 C 开发人员: 我是否正确理解如果我抛出异常然后堆栈将展开直到找到第一个异常处理程序？是否可以在不展开的情况下在任何 throw 上打开调试器(即不离开声明它的范围或任何更高
c++ - 在什么情况/情况下 dynamic_cast<> 会失败？
在修复庞大代码库中的错误时，我观察到一个奇怪的情况，其中引用的动态类型从原始 Derived 类型更改为 Base 类型!我提供了最少的代码来解释问题: struct Base { // some
c# for 循环在 switch/case 情况下 - 如何？
我正在尝试用 C# 扩展给定的代码，但由于缺乏编程经验，我有点陷入困境。使用 Visual Studio 社区，我尝试通过控制台读出 CPU 核心温度。该代码使用开关/外壳来查找传感器的特定名称(即
javascript - 在 AJAX 情况下，如何在目标页面评估 JavaScript？
这可能是一个哲学问题。假设您正在向页面发出 AJAX 请求(这是使用 Prototype): new Ajax.Request('target.asp', { method:"post", pa
html - 在 Usemap/area 情况下，光标未更改为指针
我有以下 HTML 代码，我无法在所有浏览器中正常工作: 我试图在移动到
swift - 在这种 Firebase 情况下，如何在函数之间传递数据？ swift + Xcode
我对 Swift 很陌生。我如何从 addPin 函数中检索注释并能够在我的 addLocation 操作 (buttonPressed) 中使用它。我正在尝试使用压力触摸在 map 上添加图钉，在两
ios - 在 iPad DetailView 情况下，viewDidUnload 未被调用
我设置了一个详细 View ，我是否有几个 Nib 文件根据在 Root View Controller 的表中选择的项目来加载。我发现，对于 Nibs 的类，永远不会调用 viewDidUnloa
javascript - 在这种 javascript 情况下，除了 eval 之外还有其他选择吗？
我需要动态访问 json 文件并使用以下代码。在本例中，“bpicsel”和“temp”是变量。最终结果类似于“data[0].extit1” var title="data["+bpicsel+"]
c# - 在 HTTPS 情况下，服务器证书未使用 HTTP.SYS 正确配置
我需要使用第三方 WCF 服务。我已经在我的证书存储中配置了所需的证书，但是在调用 WCF 服务时出现以下异常。向 https://XXXX.com/AHSharedServices/Custome
postgresql - 即使在 ON CONFLICT DO NOTHING 情况下，postgres INSERT 触发器也会触发
在几个 SO 答案(1、2)中，建议如果存在冲突则不应触发 INSERT 触发器，ON CONFLICT DO NOTHING 在触发语句中。也许我理解错了，但在我的实验中似乎并非如此。这是我的 S
java - 在 Hibernate3 中的 saveOrUpdateAll 情况下，具有相同标识符值的不同对象已与 session 关联
如果进行修改，则会给出org.hibernate.NonUniqueObjectException。在我的 BidderBO 类(class)中 @Override @Transactional(pr
javascript - 为什么 React App 的 redux 情况下 IndexOf(Object) 可以工作？
我使用 indexOf() 方法来精细地查找数组中的对象。直到此刻我查了一些资料，发现代码应该无法正常工作。我在reducer中尝试了上面的代码，它成功了 let tmp = state.find
mysql - 在指定了 ORDER BY 和 LIMIT 并且实际上只需要连接少量行的 JOIN 情况下，MySQL 的行为如何？
假设我有以下表格: CREATE TABLE Game ( GameID INT UNSIGNED NOT NULL, GameType TINYINT UNSIGNED NOT NU
ios - 在使用 swift ios 的某些 URL 情况下，Alamofire 进度状态显示 0.0
代码: Alamofire.request(URL(string: imageUrl)!).downloadProgress(closure: { (progress) in

首页

博学

6Ren·AI

商城

html - 如何在不变形的情况下获得比周围框更大的图片？