用CSS缩小文章里的图片可以在手机里显示

最新推荐文章于 2024-06-12 14:52:57 发布
最新推荐文章于 2024-06-12 14:52:57 发布
阅读量430 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： DIV+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/personal827/article/details/50132327
本文介绍了如何使用CSS来定义图片的布局，包括宽度、高度、行高、字体大小、颜色等样式，通过简单的代码实现美观的图片展示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

相当简单，只要定义好CSS就可以了

<style>

.desc img{width:100%;height:auto;line-height:1.8em;font-size: .800em;color:#5a5a5a}
</style>
<div class="desc">

<p>&nbsp;<img src="/images/upload/Image/Paick1002.jpg" width="790" height="525" alt="" /><img src="/images/upload/Image/Paick1003.jpg" width="790" height="428" alt="" /><img src="/images/upload/Image/Paick1004.jpg" width="790" height="453" alt="" /><img src="/images/upload/Image/Paick1005.jpg" alt="" /><img src="/images/upload/Image/Paick1006.jpg" alt="" />

</div>

CSS 媒体查询：实现完美响应式设计的核心
AI架构全栈开发实战笔记
05-29 1081
想象一下：你设计了一张精美的海报，打印在A4纸上很好看，但放大到广告牌就会模糊，缩小到便签纸又看不清文字——这就是网页在不同屏幕上的困境。本文将聚焦“如何用CSS媒体查询解决这一问题”，覆盖从基础概念到实战案例的全流程，帮你掌握响应式设计的核心能力。本文将按“故事引入→核心概念→工作原理→实战代码→最佳实践”的逻辑展开，用“布娃娃裁缝店”的故事贯穿始终，确保抽象概念具象化。媒体查询：根据设备特性（宽度、分辨率等）切换样式的“智能裁缝”。视口：网页显示的实际区域，必须通过设置为。断点。
手机网页示例1——通过CSS的宽度百分比设置达到页面自适应效果
musilin7的专栏
04-22 5179
手机网页与传统PC网页存在很大区别的一点在于页面展示。 PC网页在布局方面常常会在两边“留白”——比如把网页的主要内容居中，然后两边通常不做布置（只是显示背景）。这是因为PC屏幕大，屏幕能显示的内容多，网页设计者当然可以把需要展示的内容仅仅放到页面中间就基本足够了，而且这样还能够让页面显得美观、整洁。 而对于手机网页，手机屏幕的尺寸本来就比较小。所以通常手机网页的布局都不会在页面两边留白。设计
CSS 控制文章内容页的图片大小
u014625500的专栏
05-28 767
我们常常会遇到这种情况，当在后台插入新闻的时候，我们会遇到插入图片，有的图片很宽，如果全部显示的话，前台的样式就肯定会乱，这种问题如何来解决呢？能不能把图片按比例缩小呢？？？   用css来强制按比例压缩图片的高度或宽度 css代码如下： img,a img{ border:0; margin:0; padding:0; max-width:590px; widt
css自适应布局，缩放保持图片比例
qq_48850466的博客
05-26 5502
css自适应布局，缩放保持图片比例
CSS 3之图片缩放
程序员小白的博客
06-16 8976
使用 的描述标记 和 能设置图片大小； 和 分别表示图片的高度和宽度，可以是数值或百分比，单位可以用 px，也可以是**%、em、pt**； 注意： 高度属性是和宽度属性 设置要求相同； 例子1： CSS 3 中，可使用属性 和 设置图片的宽度和高度，以此达到图片的缩放效果；例子 2： CSS 3 中， 和 用来设置图片宽度最大值和高度最大值； 和 的值一般是数值类型； 语法格式如下所示： 或 在定义图片大小时，若图片默认尺寸超过了定义的大小，就以 所定义的宽度显示，二图片高度将同比例
CSS学习37：图片缩放
玉安_ZhangDe的博客
04-17 3404
语法： 1、x y 单独设置 transform: scale(x轴缩放倍数, y轴缩放倍数); 2、统一设置 transform: scale(缩放倍数); 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放 transform: scale(缩放倍数); scale值大于1表示放大, scale值小于1表示缩小 案例效果： 代码： <head> <style> div { margin:
html+css实现点击图片缩小或放大
debugtoday的博客
01-07 2万+
1、html代码 <div class="mainPro-img"> <img class="qqq" src="images/pro1.jpg" alt="" style="width: 100%;"> </div> 2、给需要放大或缩小的图片添加联动样式 .qqq{ transition: all 0.2s linear; } 3、设置图片的hover样式，scale(0.8)代表图片变为原图片的0.8倍，0.2s代表该变化在0.2s
html自动适配手机屏幕,手机web——自适应网页设计（html/css控制）
weixin_31999597的博客
05-30 5391
一. 允许网页宽度自动调整： "自适应网页设计"到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。对于viewport属性，我是真正在接触...
CSS在移动端适配中的部分问题总结
Jiang216的博客
01-20 470
一、像素 CSS即浏览器的渲染，而浏览器的渲染一定是基于像素而言的。对于像素，首先需要明确两个概念，即物理像素与逻辑像素。 1.物理像素 物理像素就是反映显示屏的硬件条件，反映的就是显示屏内部led灯的数量，可以简单理解，一组三色led代表一个物理像素，当然根据屏幕物理属性以及处理led的方法不一样。强调这是物理的，因为这是一个纯硬件指标。比如我把屏幕锯了一半，物理像素就只有一半。 2.逻辑像素 逻辑像素是为了调和距离不一样导致的差异，将所有设备根据距离，透视缩放到一个相等水平的观看距离之后得到的
Tailwind CSS 实战指南：快速构建响应式网页设计
最新发布
06-12 2367
Tailwind CSS 是由Adam Wathan和Steve Schoger在2017年创建的。它最初是为了解决传统CSS框架在定制性和灵活性方面的局限性。Tailwind CSS的设计理念是提供一个高度可定制的工具集，允许开发者以实用为先的原则构建用户界面，而不是依赖于预定义的组件。
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
幻昼
01-21 5万+
在DIV_CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？CSS图片缩小不变形，图片自动缩小，图片按比例等比例缩小不变形解决。 解决方法有两种： 第一种，让图
html5 运行在手机上 图片根据手势缩放
huxiaotong12的博客
07-08 1万+
文件名：pinchzoom /* Copyright (c) Manuel Stofer 2012 - rtp.ch - RTP.PinchZoom.js This is free software; you can redistribute it and/or modify it under the terms of the [GNU General Public License
css实现图片等比例缩小不变形
Inuyasha1121的专栏
09-23 7350
当图片未知大小时，为了使图片在一个规定大小的div中全部显示，可以对图片使用max-width和max-height，这样图片就会按照对大的宽或高等比例缩放图片，图片相对不变形清晰。
CSS实现图片放大缩小的几种方法
热门推荐
那些年写过的代码
07-26 10万+
CSS实现图片方法缩小
小程序本地图片在编辑器上能显示，在手机上不显示？
玛卡`三少 的博客
08-07 2万+
进行小程序开发的时候，突然发现一个如此诡异的问题：小程序本地图片在编辑器上能显示，在手机上不显示？带着这个问题可能和大家解决问的步骤一样，先惊讶一番、然后去网上找各种帖子，发现绝大部分帖子压根没有说到正点上，纯属一顿乱猜，没有去根据现象思考为什么不能在手机上显示，有的还相互抄袭、、、我实在看不下去了，所以就写了今天这篇帖子！文中我大致来分析了一下原因是什么？纯属个人见解，如有不对之处，欢迎各位大佬来喷！
两种css放大缩小图片的方法
weixin_39009993的博客
07-07 1万+
缩小图片放慢速度，目前我只能做到用jq控制。&lt;style&gt; .flex{height:100%;display:flex;justify-content:center;align-items:center} img{height:250;width:250;} @keyframes mymove { from {height:250;width:250;} to {height:400...
css如何把北京图片变小,css怎么把图片缩小
weixin_42120997的博客
08-03 2633
css把图片缩小的方法：可以通过设置图片的width或者height属性来实现图片的宽度高度，从而将图片缩小，比如在css中添加“width:300px; height:200px;”样式代码将图片设置成宽度300px、高度200px大小，如需缩小将属性值减少即可。给图片的img标签设置width或者height的任意一个，图片会自动等比例缩放。我们可以设置这两个属性值小于原图片大小使图片缩小。示...
用CSS控制图片大小显示的方法
络庆钟朔专栏
09-13 3198
图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？ 可以通过按比例缩小或者放大到某尺寸（自己指定），来保持图片不变形走样的完全显示。 对于标准浏览器（如Chrome/Firefox），或者IE7/8浏览器，直接使用max-width,max-height；或者min-width,min-
css 设置背景图一半_使用CSS设置背景图片，图片比较大，完全显示在一个DIV中...
weixin_39949297的博客
12-20 1029
做的时候想要边框为比较好看的样式，需要UI切图并且放在div中，看起来会好看点像这样的，我随便挑选了一个，UI帮我切图出来需要把这个图片填到相应的div里面，但是很显然碰到一个问题，图片太大，而且放进去以后还不是响应式的那么解决问题的就来了：background:url(1.jpg);-webkit-background-size:100px60px;这样还不是响应式应该怎么办呢IMG加载的图...
使用CSS3 Media Queries打造响应式网页设计
例如，我们可以使用`@media screen and (max-width: 980px)`来定义在屏幕显示且宽度不超过980px时生效的CSS规则。这里的`screen`是媒体类型，指代显示器，`max-width: 980px`则是表达式，表示当视口宽度小于或等于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值