I have a that is changing in width (col-x) and in height (h-100) depending on the browser window. Inside that div is a very large image being displayed. The problem with .img-fluid is that it is only constraining in width, depending on the container. But I need a solution that also scales height, when the size of the container div shrinks. But I have not found a solution.
I tried different combinations of min-height, max-height, object-fit and so on, but always the image does not shrink in width, when the container gets smaller (or then when the proportions of the div change from portrait to landscape it does not follow.
I tried to build a basic plunker to demonstrate using vh for the height of the wrapper. So the goal would be for both images to always stay inside the column. You can try playing around with the height and width of the browser to see the effect.
<div class="wrapper">
<div class="row h-100">
<div class="col-4">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
<div class="col-8">
<img src="https://i.stack.imgur.com/2OrtT.jpg" class="img-fluid" />
</div>
</div>
</div>
Styles:
.wrapper {
height: 60vh;
}
https://plnkr.co/edit/LbavqYXNNVlftUOw4Xfr?p=preview
Add css height:100%; for image
Related
I have been developing a website with 3 rows.
The rows change in height, depending on which one is selected (let's say 20vh when not selected and 40vh when selected).
Inside the rows are blocks containing images like this:
<div class="row">
<div class="block">
<div class="image-wrapper">
<img />
</div>
</div>
<div class="block">
<div class="image-wrapper">
<img />
</div>
</div>
...
</div>
My problem is making the images keep a good aspect-ratio in Safari when the rows are changing height.
In other browsers I have used the aspect-ratio css property, but it is only supported in the latest version of Safari, which I cannot just assume everyone will have.
The other trick would be the "Netflix padding trick", where you put a padding-bottom to have the right height for your images. Unfortunately this trick doesn't seem to work when applied the other way around, with a 100% height and a padding-right. The blocks end up being 0px wide.
I also tried to make the <img> height:100% and width: auto, but then the width is set perfectly for 20vh, and not adapted when parent changes to 40vh.
Here is a codepen, without the aspect-ratio attribute, which allows you to see the problem even on Chrome or Firefox: https://codepen.io/laurapiccolo/pen/KKXxYrj
Does anyone have any idea how to fix this?
Thanks!
How can I make my background colour for section 1/2 fill full screen?
http://codepen.io/ldocherty1/pen/KWGWxz
<div id="sections">
<div class="section one">
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
You want to use the VH length unit in CSS, this stand for Viewport Height and there is also its counterpart vw which stands for Viewport Width.
A quick example with these would be:
CSS:
div {
display:block;
height: 50vh;
background-color:#c00;
}
HTML:
<div>
This div will take up 50% height of the viewport that contains it</div>
Without seeing your CSS code in the question I can't give you an absolute answer but you will learn more by playing with your code yourself, with this knowledge. To make a <div> half the screen height simply set: div { height: 50vh; }.
(you may have to set things like min-height as well and/or take into account other more-complex CSS flow things depending on your exact DOM structure)
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
I have to rotate an image inside a div. The div must be 100% of width and the image inside is 100% of width so I can not define a fixed height for the div.
<div class="tab-pane" id="floorplan">
<img alt="" src="http://dexpierta.com/wp-content/uploads/2014/05/memes-4-meme_00288337.png" />
</div>
I have tried two solutions:
http://jsfiddle.net/MTyFP/7/
http://www.benknowscode.com/2014/01/css-rotated-text-parent-dimensions-and-spacing-issues.html
But none of them works as needed. Does anyone have experience with rotating images? You can see a fiddle at http://jsfiddle.net/wcqepwar/
I'm making a slider using css3 transitions. Each slide has a different height (it could contain text/images/videos/mix all of it), width is the same but responsive (100% of the parent).
<div class="slider">
<div class="slide_container">
<div class="slide current">Different amount of content</div>
<div class="slide">Different amount of content</div>
<div class="slide">Different amount of content</div>
</div>
</div>
At the moment I make it work only with absolute positioning and fixed height.
Please see http://jsfiddle.net/j6eWG/1/
Is there any way I can wrap my .slider around slides that will not have fixed height?
I need to make .slider the same height as .slide.current (http://jsfiddle.net/j6eWG/2/)
Maybe there is some transform property I can use?