Home > Article > Web Front-end > How to reduce the screen content by half with css
How to reduce the screen content by half with css
- WBOYOriginal
- 2021-12-01 16:05:203568browse
CSS method to reduce the screen content by half: 1. Place the screen element in a div element; 2. Use the width and height attributes to set the size of the div element to half of the screen element; 3. Give the div Just add the "overflow:hidden;" style to the element to hide the screen elements beyond the div.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to reduce the screen content by half in css
We can first put the screen into a div element and set the size of the div element to the screen At this time, set the size of the div element to half the size through the width element or height element, and hide the elements that exceed the div size through the overflow element. At this time, the screen content can be reduced by half.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1{
width:194px;
height:249px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="div1">
<img src="1118.02.png"/ alt="How to reduce the screen content by half with css" >
</div>
<img src="1118.02.png"/ alt="How to reduce the screen content by half with css" >
</body>
</html>Output result:
css video tutorial）
The above is the detailed content of How to reduce the screen content by half with css. For more information, please follow other related articles on the PHP Chinese website!