Overflow hidden of the image
Question
I am working on a site . I want to make the image on the header equal to the width of the page but I am unable to do so. When I increase the width of the page, it does not increase its width and hides the overflow. Please help me out.
Code
<!DOCTYPE html>
<html id="index-page" class="canvas canvastext no-touch draganddrop rgba borderradius boxshadow textshadow opacity fontface video audio localstorage mobile-768 mozilla wordpress-section w-900 lt-960 js gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius no-cssreflections csstransforms csstransitions fontface not-ie domloaded" lang="en-US" dir="ltr">
<head>
<body id="home" class="home blog">
<div id="wrap" style="">
<header role="banner">
<section id="site-logo">
<a href="http://ackmaster.com/wordpress">
<img width="1200px" alt="Ackmaster.com" src="http://ackmaster.com/wordpress/wp-content/uploads/2011/12/WebSiteMain2.jpg">
</a>
</section>
<section id="nav-wrap">
</header>
<div id="content" role="main">
<footer style="min-height: 0; padding-top: 0;" role="contentinfo">
</div>
<script>
<div id="fancybox-tmp"></div>
<div id="fancybox-loading">
<div id="fancybox-overlay"></div>
<div id="fancybox-wrap">
</body>
</html>
4 answers
solution1
3 2011-12-16 13:23:23
You can set the image width to 100% >
<img width="100%" alt="Ackmaster.com" src="http://ackmaster.com/wordpress/wp-content/uploads/2011/12/WebSiteMain2.jpg">
or:
<img style="width:100%" alt="Ackmaster.com" src="http://ackmaster.com/wordpress/wp-content/uploads/2011/12/WebSiteMain2.jpg">
Good Luck!
solution2
1 ACCPTED 2011-12-16 13:39:58
A child node can only be as large as its parent. Make sure the parent node is large enough to hold your child node. The div is only 900px but the image is 1200px. This is the problem.
solution3
0 2011-12-16 13:21:01
How about using CSS:
#site-logo{
width:1200px;
}
#site-logo img{
overflow:hidden;
}
solution4
0 2011-12-16 14:01:37
I checked you URL with FF, following change did as you expected.
img {
border: 0 none;
vertical-align: middle;
width: 100%;
}
select#mobile-navigation {
color: #1F1F1F;
float: left;
}
#nav-wrap div.bg {
-moz-box-shadow: 0 3px 0 rgba(55, 55, 55, 0.12);
background: url("../images/common-bg.jpg") repeat scroll 0 0 transparent;
height: 49px;
left: -40px;
padding: 0 57px;
position: absolute;
top: 0;
width: 97%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.