Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

作者头像

刘嘿哈

发布于 2022-10-25 06:20:20

发布于 2022-10-25 06:20:20

31200

代码可运行

举报

文章被收录于专栏：js笔记js笔记

运行总次数：0

代码可运行

1.利用border-box修改盒模型的计算规则，添加padding以减少content宽度

box-sizing: border-box;
padding: 90px;

2.css 3变形———缩放

transform: scale(0.625);

3.css3 zoon 设置或检索对象的缩放比例

zoon:0.625;

设置最大宽度

max-width:200px

5.js改变宽度，没有js解决不了的css

document.getElementsByTagName('img')[0].style.width='200px'；

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-04-27，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

css 图像处理

基础不牢，地动山摇！没办法，只能重温“经典”！ 1.CSS3边框：border-radius;　　box-shadow;　　border-image border-radius:r1,r2,r3,r4;（边框圆角！） r1~r4：分别为左上角，右上角，右下角，左下角半径（顺时针！缺省时：左上角、右下角相同；右上角，左下角相同） border-radius: 30px; box-shadow: x-shadow y-shadow blur spread color insert;（盒阴影） x-shadow

用户1149564

2018/01/11

1.8K0

前端系列第3集-如何理解css盒子型?

css 布局模型前端响应式

CSS盒子模型是一种设计网页布局的概念，它将每个HTML元素表示为一个盒子，该盒子由内容、内边距、边框和外边距组成，这些部分共同构成了一个完整的盒子模型。

达达前端

2023/10/08

3660

前端系列第3集-如何理解css盒子型?

17个场景，带你入门CSS布局

CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。

前端GoGoGo

2020/03/20

2.8K0

css基础教程之尺寸与补白

border height padding percentage width

content-box 默认值，padding和border不被包含在定义的width和height之内，会被padding撑开

老雷PHP全栈开发

2020/07/02

4660

02-移动端开发教程-CSS3新特性（中）

根据文章内容，撰写摘要总结。

老马

2017/12/20

2.2K0

深入解析CSS样式优先级

作为前端多多少少都会对CSS样式的权重有一定的了解。最常用的方法就是对不同的选择器分配不同的权重比，常见的就是

踏浪

2019/11/28

1.8K0

CSS之垂直水平居中的背后

　　最开始，我想说，这个体系有点大，我写的并不好。就当作是一个思路吧，虽然这个思路有点乱。几乎每一个实现方案的背后都是该属性及其组合的原理，每一个都要剖析其规范细节的话，这篇文章绝不会是这样的篇幅，所以每当需要说更多的时候我都简单阐述后一笔带过，然后附上参考资料。后面若是写css系列的时候再详细讲吧。

zaking

2022/09/28

1.7K0

02-移动端开发教程-CSS3新特性（中）

1. 新的背景背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 1.1 background-size设置背景图片的尺寸 cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 contain会自动调整缩放比例，保证图片始终完整显示在背景区域。也可以使用长度单位或百分比，可以是两个值第一个是水平方向第二个是垂直方向。 .box { width: 300px; height: 200px; border: 1px s

老马

2018/04/02

1.5K0

02-移动端开发教程-CSS3新特性（中）

【CSS】最核心的几个概念

css border 浏览器模型实践

本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。

前端修罗场

2023/10/07

2620

界面设计技法之布局

css布局之于页面就如同ECMAScript之于JS一般，细想一番，html就如同语文，css就如同数学，js呢，就是物理，有些扯远，这里就先不展开了。回到主题，从最开始的css到如今的sass(less),开发的效率确实变得越来越高效，但是可能有时候我们还是会对页面布局产生烦恼的情绪，比如:"咦？我想让它显示在这个部位，它一点都不听话啊"。很大原因在于我们可能没对css布局这块做一个系统的梳理~，偶然间发现了Learn CSS Layout，在此分享给大家，希望和大家共同提高，另外安利给大家一个如何写出更加优雅的html&&css代码的文章，使劲戳我!

牧云云

2019/02/15

1.3K0

[前端CSS高频面试题]如何画0.5px的边框线（详解）

border-image: linear-gradient 边框线性渐变的思路

坚毅的小解同志的前端社区

2022/11/28

1.3K0

[前端CSS高频面试题]如何画0.5px的边框线（详解）

我碰到的那些面试题html+css

http://www.sohu.com/a/330231789_120174705

李才哥

2019/09/08

1.2K0

CSS3知识点整理&&一些demo

1.圆角效果 border-radius：border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ border-radius: 100%;就是一个圆了。

牧云云

2022/03/10

6680

CSS3知识点整理&&一些demo

37·灵魂前端工程师养成-[项目]JS画皮卡丘

html css 运维自动化 javascript

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

DriverZeng

2022/11/08

3920

37·灵魂前端工程师养成-[项目]JS画皮卡丘

CSS 常见面试题速查

css 渲染布局浏览器模型

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

Cellinlab

2023/05/17

9470

【Html.js——页面布局】水果摆盘（蓝桥杯真题-1767）【合集】

html 容器 background 布局动画

在需要修改部分的代码有相关提示，请仔细阅读之后，使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码，把对应的水果放在对应的盘子里面，最终效果如下：

Rossy Yan

2025/01/24

1040

【Html.js——页面布局】水果摆盘（蓝桥杯真题-1767）【合集】

前端-CSS 最核心的几个概念

本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。

grain先森

2019/03/29

8510

前端-CSS 最核心的几个概念

前端面试实录CSS篇（最近一周）

布局浏览器面试前端 css

imgfixed：元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

沉浸式趣谈

2024/03/13

1460

前端面试实录CSS篇（最近一周）

CSS 最核心的几个概念

常见的块级元素有：div；p；form；ul；li；ol；dl；hr；table；h1~h6；

青梅煮码

2023/03/02

3550

css3 box-sizing属性

定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。默认值： content-box 继承性： no 版本： CSS3 JavaScript 语法： object.style.boxSizing="border-box" box-sizing：content-box | border-box 默认值

deepcc

2018/05/16

7920

相关推荐

重温CSS3

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验