个人中心
gpt4 book ai didi

How to make image inside a div bigger in HTML(如何在Html中放大div中的图像)

转载 作者：bug小助手 更新时间：2023-10-24 22:12:34 25 4
gpt4 key购买 nike



Here's my issue, I'm gonna put my profile picture on my own portfolio website, but for some reason it's really small.

这是我的问题，我会把我的个人资料照片放在我自己的投资组合网站上，但出于某种原因，它真的很小。


Screenshot of the topnav bar


If I make the image bigger via width and height the topnav becomes bigger along with it. I want it to be a circled image that's clickable. This is the HTML code that I have:

如果我通过宽度和高度使图像变大，那么顶部导航也会随之变大。我希望它是一个可以点击的带圈的图像。这是我拥有的HTML码：


<!DOCTYPE html>

<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
        <meta name="viewport" content="width=device-width, intial-scale=1">
        <link rel="stylesheet" href="styling.css">
    </head>
    <body class="bigbody" style="background-image: url('images/DSC_0761.JPG');">
        <div class="topnav">
            <a class="active" href="#home">
              <img class="profile" src="images/square-profile.jpg" alt="">
            </a>
            <a href="#news">Newz</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
          </div>
          <div class="mainbody"> 
            <h2 class="titlediv">Wag1 Bruda</h2>
          </div>
    </body>
</html>

And this is my CSS:

这是我的css：


.topnav {
    background-color: rgb(37,37,37, .3);
    overflow: hidden;
    border-radius: 5px;
}
  
.topnav a {
    float: left;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Inter', sans-serif;;
}
  
.topnav a:hover {
    background-color: #1a1a1a;
    color: rgb(255, 255, 255);
    transition: 0.3s;
}

.topnav a.active {
    background-color: #1b1b1b;
    color: white;
}

body.bigbody {
    position: relative;
    background-size: cover;
}

div.mainbody {
    background-color: #00b7ff00;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    width: 200px;
    height: 200px;
    margin: 500px;
}

h2.titlediv {
    font-family: 'Inter', sans-serif;;
}

img.profile {
    position: relative;
    width: 10px;
    height: 10px;
}

Hope that helps.

希望这能有所帮助。


更多回答

hi, a minimal reproducible example might help us to debug your problem

您好，一个最小的可重复使用的示例可能会帮助我们调试您的问题

Sorry about that, lemme post my code

很抱歉，让我把我的代码贴出来

In order to make this reproducible you need to use images available online for the purpose of your illustrative, reproducible example, so we can see right away what the problem is. If you convert your code into a snippet, that would be even more helpful, because we could see your code in action via the click of a button.

为了使其可重现，您需要在您的说明性、可重现的示例中使用在线可用的图像，这样我们就可以立即看到问题所在。如果您将您的代码转换为代码片段，这将更有帮助，因为我们可以通过单击按钮看到您的代码的运行情况。

优秀答案推荐

This problem is caused by the padding attribute you give to the "a" tags. Give the ".profile" class in the img tag to the "a" tag. and add the following css properties.

这个问题是由您为“a”标记提供的填充属性引起的。将img标记中的“.profile”类赋予“a”标记。并添加以下css属性。




.topnav {
  background-color: rgb(37, 37, 37, .3);
  overflow: hidden;
  border-radius: 5px;
}

.topnav a {
  float: left;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Inter', sans-serif;
  
}

.topnav a:hover {
  background-color: #1a1a1a;
  color: rgb(255, 255, 255);
  transition: 0.3s;
}

.topnav a.active {
  background-color: #1b1b1b;
  color: white;
}

body.bigbody {
  position: relative;
  background-size: cover;
}

div.mainbody {
  background-color: #00b7ff00;
  backdrop-filter: blur(5px);
  border-radius: 10px;
  width: 200px;
  height: 200px;
  margin: 500px;
}

h2.titlediv {
  font-family: 'Inter', sans-serif;
  
}

.profile {
  height: 48px;
  width: 48px;
  padding: 4px !important;
  box-sizing: border-box
}

img {
  width: 100%;
  border-radius: 50%;
}

<div class="topnav">
  <a class="active profile" href="#home"><img src="https://gaveinjaz.com/wp-content/uploads/2019/12/opulent-profile-square-07.jpg" alt=""></a>
  <a href="#news">Newz</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>





You need to remove (or reduce) the padding on the <a> element which contains your profile picture. One way to do that is to use the :has pseudo-class. More info here.

您需要删除(或减少)包含您个人资料图片的元素上的填充。实现这一点的一种方法是使用：Has伪类。更多信息请点击此处。




body {
  background: #7d9ec1;
}

.topnav {
  background-color: rgb(37,37,37, .3);
  overflow: hidden;
  border-radius: 5px;
  display: flex; /* use flex instead of float */
  gap: 0.5em;
  align-items: center;
  padding: 0 10px;
}

.topnav a {
  color: #ffffff;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 17px;
  font-family: sans-serif;
  transition: 0.3s;
}

.topnav a:hover {
  background-color: #1a1a1a;
  color: rgb(255, 255, 255);
  border-radius: 5px;
}

.topnav a.active {
  background-color: #1b1b1b;
  color: white;
}

.topnav a:has(.profile) { /* targets an <a> element which contains a .profile element */
  padding: 2px;
}
  
img.profile {
  display: block;
  width: 40px;
  border-radius: 50%; /* makes the image a circle */
}

<div class="topnav">
  <a href="#home"><img class="profile" src="http://picsum.photos/100" alt=""></a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>





Remove the width and height attributes from the img.profile in your CSS because they are currently set to a very small size (10px x 10px).
css
Define a size for your profile image using CSS. You can set the width and height in pixels or use other units like percentages.

从您的css中的img.profile中删除宽度和高度属性，因为它们当前被设置为非常小的尺寸(10px X 10px)。Css使用css定义您的配置文件图像的大小。您可以设置宽度和高度(以像素为单位)或使用其他单位，如百分比。


更多回答

Stack snippets are the equivalent of a jsFiddle, but they are built right into Stack Overflow.

堆栈片段相当于jsFdle，但它们直接内置于Stack Overflow中。

While :has might work here - support is still not full. You could use the attribute selector instead [href="#home"] { ... } MDN or since home will probably always be first, you could do .topnav a:first-child { }

While：Has可能在这里起作用--支持仍未完全完成。您可以改用属性选择器[href=“#home”]{...}MDN，或者由于home可能始终是第一个，您可以执行.topnav a：first-Child{}

True regarding :has support, but (a) it's only Firefox which is lagging, (b) Firefox will support it soon, and (c) I don't consider Firefox to be a major browser. As a developer I would rather be leading than lagging.

关于：有支持，但(A)只有Firefox落后，(B)Firefox将很快支持它，(C)我不认为Firefox是主要的浏览器。作为一名开发人员，我宁愿引领而不是落后。

I'm typing this comment - using FireFox. Browser of development choice over here. HA! Yes, FF has a very low market share, but I would hardly say it's not a major browser.

我正在用Firefox输入这条评论。浏览器的开发选择在这里。哈！是的，FF的市场份额很低，但我很难说它不是一个主要的浏览器。

And do you have this flag set? layout.css.has-selector.enabled

你们设置了这面旗帜吗？Layout.css.has-selector.enabled

Nope. Set to false. I generally don't update any of the :config stuff unless I really need to test something cutting/bleeding edge.

不是的。设置为False。除非我真的需要测试一些尖端的东西，否则我通常不会更新任何：CONFIG的东西。

25 4 0
文章推荐： Application in Unity using Vuforia shows only a green screen and doesn't show the camera(使用Vuforia的Unity中的应用程序只显示绿色屏幕，不显示摄像头)
文章推荐： In C++20, the get<>() function inside is no longer in namespace std. Why? [duplicate](在C++20中，中的get<>()函数不再位于名称空间std中。为什么？[复制])
文章推荐： Remove child products from bundle in order(按顺序从捆绑包中删除子产品)
文章推荐： Adding Scroll Bar to Sharepoint Multi Line Texts Column not allow complete text in a cell to show(将滚动条添加到Sharepoint多行文本列不允许显示单元格中的完整文本)
bug小助手
个人简介

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

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