I have a row with a certain height (e.g. 600px) and would like fit an img (size 1920x1080) into this row, stretching responsively 100% to the row width but not exceeding the height.
In other words, only 600px of the height of the image should be shown (the rest can be cut off, hidden, etc.), and it should remain responsive to the row width. To illustrate, only the part within the red borders should show:
The problem I am having is that "img-fluid" always fits the image to the smaller height of the container, and thus shrinking the width to keep the aspect ratio. Without img-fluid, or adding a fixed height to the image, the aspect ratio gets lost and the image is "squeezed" into the row-container. My code:
.img-400 {
height: 400px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row img-400">
<div class="col-12">
<img src="https://image.ibb.co/iG8OSb/dogs.jpg" class="img-fluid" />
</div>
</div>
</div>
Note I tried this one: Constraining image height with bootstrap responsive image? but didn't work, it keeps scaling the img out of the container.
the above solution works if the .img-fluid is not manipulated:
.img-400 {
height: 400px;
overflow: hidden;
}
Hi try this one,
.img-400 img{ width: 100% ; }
Hope this helps :)
To achieve your image fitting into a specific height, you can use the open source library bootstrap-spacer via NPM
npm install uniformimages
or you can visit the github page:
https://github.com/chigozieorunta/uniformimages
Here's an example of how this works using the "unim" class (you'd require jQuery for this):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="uniformimages.css" rel="stylesheet" type="text/css"/>
<script src="uniformimages.js" type="text/javascript"></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a href="product1.html">
<img src="image1.jpg" class="unim" height="100"/>
</a>
</div>
</div>
</div>
</section>
</body>
Related
I have content and sidebar:
.border {
border: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-7 col-lg-9 border">
<div class="content">
.....
</div>
</div>
<div class="col-md-5 col-lg-3 border position-relative">
<div class="position-fixed border" style=" width: inherit;">
....
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
In this example width of element position-fixed is not inherit of parent element. Why? I need get inherit width of parent element. If I set width: 20% then width is working on position fixed, but why width inherit is not working?
It's working fine but you need to note that position:fixed has its width relative to the viewport. So if you set 20% to the parent, the fixed element will inherit 20% and will not inherit the calculated pixel value of its parent element width.
So both element will have 20% but not both of them have the same reference for the percentage (i.e. not both of them have the same containing block)
The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. ref
... However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. ref
Here is a basic example to illustrate:
.box {
border:2px solid red;
min-height:50px;
width:100%;
}
.box > div {
position:fixed;
width:inherit;
min-height:50px;
border:2px solid green;
left:0;
}
body {
padding:0 100px;
}
<div class="box">
<div></div>
</div>
In the below example, both element are having width:100%. The fixed element is having 100% width of the viewport while the static element is having 100% of the body width minus padding.
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:
...
For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.
If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media. ref
Another thing to note is that you are not setting any left value in your code which is confusing and will make your think the width of the fixed element isn't correct but you are simply having an overflow.
Here is the pervious code without left:
.box {
border:2px solid red;
min-height:50px;
width:100%;
}
.box > div {
position:fixed;
width:inherit;
min-height:50px;
border:2px solid green;
}
body {
padding-left:100px;
}
<div class="box">
<div></div>
</div>
We may think that the fixed element has the same width as the static one, but no. The fixed element is overflowing.
Related: Why aren't my absolutely-positioned elements located where I expect?
for me i calculate percent of wanted col to be fixed then set it to css by width percent
for example if want fixed element to be col-md-2
this meaning you will set width in css to 2/12 = 16% !important; like this
.fixedelement{width:16% !important;}
I would like to display the image and footer to always fit the browser window - no scrolling. In order to fit the image should be resized while keeping the ratio. Footer should always be at the bottom and the image fill the rest of the space.
I thought this should be easy to achieve with bulma - but so far i couldn't make it work. Is the hero-layout not the right layout to achieve this with bulma?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
</head>
<body>
<section class="hero" style="height: 100vh">
<div class='hero-body is-paddingless'>
<figure class='image'>
<img src="https://via.placeholder.com/400x800">
</figure>
</div>
<div class='hero-foot'>
<div class='box'>
hero-foot
</div>
</div>
</section>
</body>
</html>
First, I dont think many knows what bulma or hero-layout is, but if you want a background to be a picutre and fit the whole screen you should try it with this, this also should make the page be full width without scrolling:
CSS:
body, html {
height: 100%;
}
.bg {
background-image: url("your_background");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
If that doesnt work for you, you can try disabling scrolling:
overflow: hidden;
doing a totally new website now. Haven't coded anything yet, just in the research stage. You know how an image will be on your computer or TV screen and it will start to grow bigger, not in a zoom way so much than in a way as if the image was coming towards you? What would you call that? I want to do the reverse, have it appear to be going toward the background on the screen from where I am, so the image will technically be getting smaller but will have kind of a 3D feel, as if it's getting farther away. Can anyone help me with what I should be looking for? Thanks!
Do you mean the effect of an responsive image?. Bootstrap makes use of the <img class="img-responsive" src="..."> to create responsive images. An example down below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
trasnform: scale() does something like you're describing.
img {
max-width: 100%;
animation: scale 3s forwards;
transform-origin: 50% 0;
}
#keyframes scale {
to {
transform: scale(0);
}
}
<img src="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg">
I have this kind a scenario:
<div id=area>
<div id=box>
</div>
</div>
<div id=footer>
</div>
div "area" is center and it is 700px width and has shadows at right and left.
there is then a div box, which is 500px width and has text and options in it.
And at bottom I have footer where is one line of text.
So, my shadow effect at div "area" stops at same spot as box does. At next page, i have ~2000px amount of text in same box, and there "area" div's shadow is as it should be.
I want to have "area" div whole screen size, and more if there is more text inside of it.
Try something like this :
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="area">
<div id="box">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS
html {height:100%}
body {height:100%;margin: 0;padding: 0;}
#area {height: 100%;background-color: blue}
I'm pretty new to Bootstrap 3. I'm having issues with the grid system: http://getbootstrap.com/css/#grid .
Everything works well below 992px. In other words, <728 px my two divs stack, >728 px they are horizontal. However, above 992px they stack AGAIN. My aim is that my two divs only stack for "Extra small devices Phones (<768px)". Not for bigger screens.
This is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class ="container">
<div class ="row">
<div class ="col-sm-6">
<img src="http://placehold.it/500x500.png" class="img-responsive">
</div>
<div class ="col-sm-6">
<img src="http://placehold.it/500x500.png" class="img-responsive">
</div>
</div>
</div>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
EDIT:
Have a look at the images, please. It's not working for me (neither in FF nor in Chrome).
Picture one works.
Making the screen wider, it starts stacking:
Add classes below to each of your blocks, that have to be stacked one under another in small version.
col-lg-6 col-sm-12
col-lg-6 says:
Make block 50% width in LG and smaller dimensions
col-sm-12 says:
Make block 100% width in SM and smaller dimensions
Zoom. It's expected behavior. Zoom would change your page_width/element_width ratio.
So you will get other breakpoint usually after zooming.