Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How does CSS control the width of pictures in DIV?

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how CSS controls the width of pictures in DIV. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

In the list of fluid pictures, it is often encountered that CSS controls the width of the picture in DIV, and the picture is highly scalable. In fact, this layout is not as complex as it is, do not consider that CSS control height is the best layout.

When encountered with such a DIV CSS layout, it is actually very simple, we only need to control the picture width, and the picture height does not need to be set, that is, the picture height will automatically adapt to the zoom ratio (without setting the height, that is, the height value defaults to auto adaptive).

As shown in the image above, add a CSS named ".imgbox" to the DIV box with the width of 252px. At this time, how to write CSS so that the height of the image in the object is automatically scaled according to the width:

.imgbox img {width:252px}

Such a simple CSS selector can control the width of the picture in the DIV box ".imgbox" without setting the CSS height (height) style, so that the default image will be scaled proportionally and adaptively.

These are all the contents of the article "how CSS controls the width of pictures in DIV". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report