解决css设置图片大小不生效的问题

news2024/10/6 7:21:12

今天在做css布局时发现一个问题:设置图片大小不生效:

 如上图所示:左上角两个图标的大小不一致,第一个是56x56,第二个是49x49,所以要把第二个的高度设置成56px:

.mi-home img {
  height: 56px;
}

但是如上代码,设置以后发现并没有生效,大小还是没有改变。

 这里需要注意了,设置img标签属性分为两种情况:

1. 在img标签的父级设置属性,此时css选择器应该带上img。如下代码:

#nav .logo img {  // .logo是img标签的父级
  border-radius: 5px;
  height: 56px; 
}

2. 如果是在img标签本身的元素设置属性,此时就不能带上img属性

此时就应该写成:

.mi-home { // .mi-home是img同级元素的class属性
  background-color: #ff6700; 
  height: 56px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/991974.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java-钉钉订阅事件

文章目录 背景什么是钉钉订阅事件钉钉订阅事件的应用场景 整体思路查看钉钉文档 什么是钉钉回调钉钉回调具体实操创建自己的应用钉钉回调开发过程中遇到的问题 总结 背景 最近需要做一个业务:钉钉组织架构下添加人员之后,要对该人员的数据信息做一个处理…

mysql课堂笔记 mac

目录 启动mac上的mysql 进入mysql mac windows 创建数据库 创建表 修改字段数据类型 修改字段名 增加字段 删除字段 启动mac上的mysql sudo /usr/local/mysql/support-files/mysql.server start 直接输入你的开机密码即可。 编辑 进入mysql mac sudo /usr/local…

Revit SDK 介绍:MeasurePanelArea 统计分割表面中族的面积

前言 这个例子介绍如果从分割表面中,获取内部Tile(或者Panel)的族里面的几何实体的面的面积。 内容 本例子的逻辑相对来说比较简单,主要是对 DividedSurface 和 Element 的API接口要熟悉。 核心逻辑 设置单个面板Panel的面积上…

交友盲盒完整版——详细源码分享

现在目前比较火热的一款app交友盲盒是通过uniappspringboot技术来制作的,原理其实很简单,大家一看便知。 大家自行下载到手机里面去使用即可,不支持ios手机 演示地址:https://share.weiyun.com/l3ovztce 下面就是给大家分享源码了…

用Maloja创建音乐收听统计数据

什么是 Maloja ? Maloja 是简单的自托管音乐记录数据库,用于创建个人收听统计数据。没有推荐,没有社交网络,没有废话。Maloja 是一个跟踪您一段时间内的收听习惯的工具。 官方演示站点:https://maloja.krateng.ch/ 导出…

一路风景一路歌 森海塞尔MKE 200为你记录City Walk的美妙旋律

“想要切身融入并感受一个地方的生活,不去当地街头溜达溜达怎么行?”一位City Walk Vlogger这样说。 City Walk可谓是时下最潮的生活方式之一了。不仅越来越多的游客开始穿梭于城市街巷,探寻饱含记忆的老建筑、老街区,从另一种角度…

Smallest number(dfs全排列)

Smallest number - 洛谷 #include<bits/stdc.h> #define int long long using namespace std; int a[10]; string s[5]; bool vis[10]; int ans1e13;//0x3f1e9&#xff0c;所有有点不够 void dfs(int u) { // for(int i0;i<4;i) // { // printf("%d…

Arouter配置指南

Arouter实现了大型App之间的轻耦合&#xff0c;降低代码的复杂度&#xff0c;易维护。如果不使用Arouter那么项目之前的关系可能是如下&#xff1a;底层模块间相互耦合&#xff0c;工程代码复杂度高&#xff0c;不便于管理。 Arouter 引入Arouter后希望底层模块间轻耦合&…

海南开放大学——助力学习之路的智慧导航

在信息时代的今天&#xff0c;我们面临着大量的学习资源和知识碎片化的挑战。而面对这一挑战&#xff0c;海南开放大学&#xff08;广播电视大学&#xff09;以其先进的教育理念和创新的学习方式&#xff0c;为学习者提供了一个独特的学习平台&#xff0c;开启了智慧导航的学习…

10路混音播放芯片,AD按键可扩展,IO口资源丰富,WTR096A-16S

随着科技的不断进步&#xff0c;我们的生活中对于音频体验的需求也在日益增加。无论是玩具、娱乐设备还是智能家居产品&#xff0c;都需要高性能、多功能的混音播放芯片来提供卓越的音频处理和控制能力。正是在这个背景下&#xff0c;我们引入了全新的WTR096A-16S混音芯片&…

房贷利率下调一言难尽

号外&#xff1a;9.7教链内参《摩根大通研究称BTC生产成本约为1.8w刀》。 一大清早&#xff0c;打开手机&#xff0c;就收到了新华社的推送&#xff0c;说是工农中建四大行7号发了公告&#xff0c;明确了存量首套住房贷款调整的事。&#xff08;新华社2023.9.8《四家银行发布公…

【新版】系统架构设计师 - 案例分析 - 总览

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 架构 - 案例分析 - 总览 新旧大纲对应 旧版新版系统规划软件架构设计设计模式系统设计系统建模分布式系统设计嵌入式系统设计系统的可靠性分析与设计系统的安全性和保密性设计系统计划信息系统架构的设计理论和实…

【观察】全栈智能:破解AI落地“最后一公里”难题

《系统论》认为&#xff1a;系统是由一些相互关联、相互作用、相互影响的组织部分构成并具有某些功能的整体。从系统的角度来看&#xff0c;如果把系统分解为部分&#xff0c;单独研究一个部分&#xff0c;就算把每个部分都研究清楚了&#xff0c;也回答不了系统整体性问题。 事…

C# 共享项目的应用

概述 共享项目也可以称为共享资产项目,它允许在多个目标项目之间共享的代码。 它支持编译器指令,可以有条件地包含特定于平台的代码,以便编译为引用共享项目的项目的子集。 还有 IDE 支持,可帮助管理编译器指令并直观显示代码在每个应用程序中的外观。 什么是共享项目? …

flink的物理DataFlow图及Slot处理槽任务分配

背景 在flink中&#xff0c;有几个比较重要的概念&#xff0c;逻辑DataFlow图&#xff0c;物理DataFlow图以及处理槽执行任务&#xff0c;本文就来讲解下这几个概念 概念详解 假设有以下代码&#xff1a;数据源和统计单词算子的并行度是2&#xff0c;数据汇算子的并行度是1&…

新知同享|Cloud 开发加速创新,更加安全

谷歌在云平台中深度集成了生成式 AI 功能 帮助出海企业及开发者 轻松借力 AI 推动和实现创新 一起来看 2023 Google 开发者大会上 Google Cloud 如何加速创新&#xff0c;加强信息安全 关注 Google Cloud 的 3 个 AI 重点发展领域 了解生成式 AI 功能如何助推创意落地 精彩大会…

【动手学深度学习】--循环神经网络

文章目录 循环神经网络1.算法介绍1.1无隐状态的神经网络(多层感知机)1.2有隐状态的循环神经网络1.3基于循环神经网络的字符级语言模型1.4困惑度 2.RNN从零开始实现2.1读取数据集2.2独热编码2.3初始化模型参数2.4循环神经网络模型2.5预测2.6梯度裁剪2.7训练 3.RNN简洁实现3.1读取…

嵌入式学习笔记(21)S5PV210的时钟域详解

时钟域&#xff1a;MSYS、DSYS、PSYS 因S5PV210的时钟体系比较复杂&#xff0c;内部外设模块太多&#xff0c;因此把整个内部的时钟划分为3大块&#xff0c;叫做3个域。之所以分为3个域&#xff0c;是因为210内部的这些模块彼此工作时钟频率差异太大了&#xff0c;所以又必要把…

【力扣每日一题】2023.9.9 课程表

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一些课程的先修关系&#xff0c;也就是有些课我们需要先去学其他的课程才能学习&#xff0c;问我们是否可以学习完所有的课程。…

中科驭数携DPU系列创新产品亮相2023服贸会

9月2日至6日&#xff0c;由商务部、北京市政府主办的2023年中国国际服务贸易交易会&#xff08;简称“服贸会”&#xff09;在北京举行。在电信、计算机和信息服务专题展馆&#xff0c;中科驭数等一批国家专精特新“小巨人”携最新数据处理器DPU亮相&#xff0c;展示了多项创新…