简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

How to use css to make images adapt to the screen?

藏色散人
Release： 2018-08-06 17:49:18
Original
6914 people have browsed it

本篇文章主要介绍了如何实现css图片自适应屏幕的效果。对于新手来说最简单的方法，即图片写在div里面的背景里。这样就能自适应屏幕大小且不会出现横向的滚动条。

css图片自适应屏幕代码示例如下：

background:url(1.jpg) center no-repeat;
background:url(图片地址) 0 0 no-repeat scroll transparent;background-size:100% 100%;
/* 图片固定在ims里面*/
<div class="ims">
<img style="max-width:100%;overflow:hidden;" src="1.jpg" alt="">
</div>
Copy after login

注：在html里面插入图片，如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入

img { height: auto; width: auto\9; width:100%; }
Copy after login

\9是hack css 的一种写法，这种在正常css代码后面加"\9"的方式，只有IE浏览器才能识别，其他浏览器会忽略这条语句。这样就能做到差异化浏览器，来达到兼容浏览器的目的。

【相关文章推荐】

响应式和自适应有什么区别

怎样实现图片大小自适应 

padding制作图片自适应布局（CSS百分比）

HTML中使背景图片自适应浏览器大小


The above is the detailed content of How to use css to make images adapt to the screen?. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css图片自适应屏幕
source：php.cn
Previous article：Introduction to the usage of css box-sizing attribute (box model) Next article：How to use pure CSS to achieve the effect of a green pig
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Part of the footer jumps to another component, but only when the page loads in React I wrote this part of the code a while ago and after working on other pages I came back and...
From 2023-09-11 12:41:25
0
1
301
Website design and development using Hugo Tikva theme and Bootstrap-4 I'm overhauling my company website using the Hugo framework and Bootstrap. Developing webs...
From 2023-09-11 08:49:48
0
1
190
Bootstrap landing page layout issue - container does not fit correctly to screen size I'm currently practicing using Bootstrap to create a landing page. However, I'm facing lay...
From 2023-09-10 21:04:02
0
2
280
Adapting CSS to different screen sizes: A guide I have this CSS code and my problem is that due to padding-top (with some space from the t...
From 2023-09-09 00:05:15
0
1
201
The use of drop-down menus in sliding menus I'm having some difficulty trying to find a way to add a submenu or dropdown within a sect...
From 2023-09-08 18:53:16
0
2
228
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！