Responsive element wider than parent width/wrapper width - html

I would like my images to be displayed wider than my wrapper/parent width but still be responsive with the browser window size. Currently, my wrapper width is 500px.
I'm able to achieve wider images by:
<p style="margin-left: -25%; margin-right: -25%;">
<img alt="My wide image" style="width: 100%;" src="wide_image.jpg"/>
</p>
The above gives an image width wider than parent/wrapper width, but, the image doesn't scale with the browser window; instead, the wrapper/parent width scales correctly, and a horizontal scroll bar appears in the browser to navigate the image from left to right.
Thank you in advance. :-)
Edit: added missing double quote as Elliott Post pointed out.
Edit2: the answer shown here scales the image with respect to the browser window, however it obscures text after the image and is the full width of the page rather than 25% extra on each side: Is there are way to make a child DIV's width wider than the parent DIV using CSS?
Edit3: Here is a modified jsbin from Roko C. Buljan: http://jsbin.com/sumoqigo/1/edit

A quick fix for older browsers is to simply add overflow-x:hidden; to your body element.
Talking about responsiveness and modern browsers, if you don't want to have parts of your images hidden by the body overflow...
you could use media queries to achieve the desired:
jsBin demo
First add a class to your image:
<img class="wideImage" src="image.jpg" alt="My image"/>
Than the following CSS:
.wideImage{
width:150%;
margin-left:-25%;
}
#media(max-width: 750px){ /* 25%of500px=125; 125*2=250; tot=750 */
.wideImage{
width: 100vw; /* vw is the CSS3 unit for Viewport Width*/
margin-left: calc( (-100vw + 500px) / 2 );
}
}
#media(max-width: 500px){
.wideImage{
width: 500px;
margin-left:0;
}
}

Related

How do I get the most out of image for responsive layout using CSS?

I want to make an image good for a responsive layout. I am using an large .svg image at the moment which resizes to any and still looks sharp.
However, when I put the image in a div it is sometime too big or small. I just want it to fill the screen properly.
So far I have coded:
img{display:block;}
but am sure theres more to it...Anyone?
To make your image change size dynamically (and stay within your div), give it a max width and set the height to auto.
.imgcontain {
max-width: 50%;
}
img {
max-width: 100%;
height: auto;
}
<div class=imgcontain>
<img src="https://images.unsplash.com/photo-1542044896530-05d85be9b11a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
</div>

Different layouts for different screen's width

I am working on a webpage, and I want to use JavaScript to center some text (contained in a "p" with the display:inline-block attribute) when the text is shifted under everything else (on a smaller window). When the window size is big enough, I have the text on the right of the screen (where I want it for larger windows).
Basically, I have content on the left and right of the screen for bigger windows, but I want that content to become centered and vertical when the browser is smaller.
I've tried using .addEventListener() but my JavaScript knowledge is pretty limited.
Any thoughts? Does this make sense?
I see you're trying to do some sort of responsive design. You're better off doing this without any javascript.
You should look into Css Media Queries, that are meant to set specific css styles depending on the screen size:
#media screen and (max-width: 500px) {
Similar to your scenario, here's a sample showing the concept: http://jsfiddle.net/xkJ3G/
Resize the window and test it!
You can achieve desired effect using only HTML and CSS.
JSFiddle
HTML
<div class="outer">
<div class="A">A</div>
<div class="B">B</div>
</div>
CSS
div.outer {
width: 100%;
text-align: center;
}
div.A,
div.B {
width: 40%;
min-width: 250px;
display: inline-block;
}
Linebreak will be when width is lesser than min-width (in this example when 40% < 250px)

Twitter Bootstrap Carousel Not Stretching Background Images

I'd like the carousel to scale proportionally the background image
in this question Bootstrap Carousel Image does not scale proportionately it is suggested to leave the image explicit dimension but I can't understand what it means.
Set this in your HTML
For every img element in your carousel, you can set the width property to 100% like this (although you shouldn't need to if the natural resolution is larger than the control):
<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'>
normally, this image would be too small to expand fully, but 100% scales it up.
make sure you don't have the width or height set to any pixel sizes
jFiddle
Since the image is going to go full screen, you should try to get your hands on a resolution that will naturally try to take up the full width available. When the browser has to scale the image up, it will cause artifacts.
What they mean is to leave off the width=px and height=px from the image (or image styles). You can set width="100%" and leave off the height. The browser will scale proportionally for you.
Try this option without the inline styles. Just add this to your stylesheet to override the bootstrap.css style.
.carousel .item {
width: 100%;
/*slider width*/
max-height: 600px;
/*slider height*/
}
.carousel .item img {
width: 100%;
/*image width*/
}

100% width image in hero unit

I'm looking to place an image inside the .hero-unit that takes up 100% of the unit. This means that it would scale according to the overal window size.
Right now i have the in there, but it looks like there's 100px padding to the right of the image. If i adjust the image max-width: 100% to something larger, it does not scale accordingly.
<div class="hero-unit">
<img src="images/landscape.png">
</div>
Does anyone have an idea of how to remove the padding on the right, but also preserve the auto-resizing capabilities of bootstrap?
As mentioned use the following selector :
.hero-unit img {
width: 100%; height: auto;
}
Working sample : http://jsfiddle.net/basarat/MgcDU/2145/
width: 100%; height: auto; should work, as long as the container div's resizing according to window width is correct.
You can do the following :
Here's one jsfiddle http://jsfiddle.net/shail/5YD2J/1/
<div class="container">
<div class="hero-unit">
<img src="http://placehold.it/1500x400">
</div>
</div>
.hero-unit {
padding:6px;
}
You need to have your image in good resolution , scaling an image with small width and height will lead to bad stretched dimensions and wont look good .

Responsive image max height 100% doesnt work in firefox

i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)