I am new to bootstrap so I don't exactly know how it works !
What I want to do is to make the 3 images shown in the screen shot of same size.
Their resolutions are different .
This is the html for each image
<div class="col-sm-2 ">
<div> <img src="img/test.jpg"> </div>
<div > <h3>Text Here</h3> </div>
</div>
This is the screen shot
add class="img-responsive" to your img and for the same size display you can add some custome class such as my_img and set the size there:
my_img{
height: 200px
width: 150px
}
or set a default height to the parent. Than you can do width: 100%; height: 100%
So what you know have is a column. That sets the width. than you have a div which has no class yet. You can add style to that div or to the img directly.
The column is responsive by default so just give the img a width: 100%; (it will scale to parent element) and that div will scale to its parent element as well which is col-sm-2.
Related
I have divs with images in them stacked horizontally side by side of each other. Images are of different widths and heights.
If I make the container width's smaller than the images, all the divs are uniform nicely.
But if I make the width of the container bigger than the images, the div/container width just seems to stop at the size of the image and refuse to get any bigger. What am I doing wrong or am I misunderstanding anything? I'm still learning my HTML and CSS thank you
PS - I don't want to use background: url(...) because I need my image URLs to be dynamic. Unless this is the only way?
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
It is possible they are inside a flex container (that has display:flex). That makes it treat width property of children differently.
When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:... read more
(specifically it forces items to stay on one line [no matter the count])
Give the images a width of 100%. This will make them as wide as their parent, not as wide as their native size.
&__img {
width: 100%;
}
Update (based on added context): if the parent container has a display property of flex, one has to set min-width to 100% on the image. Note: flex-wrap: wrap should also be set on parent, to prevent siblings from creating a horizontal scrollbar on parent.
An alternative solution is to give the image flex-basis of 100% and flex-shrink of 0.
However, flex calculation is dependent on several other CSS attributes of the image as well as on CSS attributes and content of siblings and of parent elements. The safest option for flex remains min-width, as it trumps the result of flex calculation (basically the flex calculation starts from the given min-width and distributes the remaining space, if any, to the flexible siblings).
as you can see from the snippet below wrapping your code in a flexbox container doesn't change anything by itself. There most be either additional css or something else going on.
I edited your original post. You will get help faster if you post snippets here instead of providing a link to js fiddle.
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
}
#container{
display:flex;}
<div id='container'>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
</div>
<br><br>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
Try this.
<html>
<head>
<style>
.page {
width: 500px;
}
.container {
float: left;
width: 50%;
}
img {
float: left;
width: 100%;
height: 500px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<img src="https://news.harvard.edu/wp-content/uploads/2022/02/20220225_wondering_dog-2048x1366.jpg" alt="" />
</div>
<div class="container">
<img src="https://www.princeton.edu/sites/default/files/styles/full_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=Hy5eTACi" alt="" />
</div>
</div>
</body>
</html>
I want to fit an image inside some divs and make it as big as possible without changing the aspect ratio. Setting max-height and max-width to 100% on both the image and its parent does not work and the image overflows (I guess because the parent does not really have a width or height so the image can not resize to it?).
JSFiddle
<div class="block">
<div class="row">
<div class="col-xs-9">
<div class="thumbnail">
<img class="placeholder" src="https://unsplash.it/900/600" alt="">
</div>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
Edit:
I will clarify what I really want to achieve later this evening when I have time to write.
Set the the image as background image to .thumbnail, and constrict it's size using background-size (demo):
.thumbnail {
display: inline-block;
margin: 0;
height: 100%;
width: 100%;
background: url("https://unsplash.it/900/600") no-repeat;
background-size: contain;
}
If you want the parent div to match its content, add display:table; in your "outline-block" css class.
Fiddle
Similar post on stack overflow: how-do-i-auto-resize-an-image-to-fit-a-div-container
I have a following page:
<div class="Container100"
style="text-align: center; margin-top: 15px;">
<img
style="width: auto; max-width: 100%; height: auto; text-align: center;"
</img>
</div>
<div class="Container100">
<div class="Card ShadowEffect"
style="text-align: center;">
<div class="ContainerIndent">
Text
</div>
</div>
</div>
The problem is now:
I would like to resize the image to a width that the footer and the image is at one page and there are no scrolling is necessary.
Currently the img is to big and I have to scroll down to get also the footer.
How can I resize the image to the specific width responsive?
I can define a width like 500px but this is not that what I want because the width / height should so big that the image and footer appears at one page without scrolling.
How can I do this?
Make the image width 100%
along with your page height and width.
also set the float to auto
Asign a width and height in % for both the image and footer.
For example:
If image width is 95% of the screen, set width: 95%;
Then set the footer to width: 5%;
That should be it :)
I am trying to put an image into my Website.
The image is in a div that hast got a fixed size.
The Problem is that the image stretches the whole div
when I use auto height in CSS.
The Image fits into its div setting its height and width to 100%:
Now I would like to keep the Image unstretched.
So I set the width 100% and the height as auto
as it is described here
After setting that the image is in a layer under the section below
but layers on the next part of the page.
here is the HTML Code I used:
<div class="section4">
<section class="half">
<div class="officePicContainer">
<img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
</div>
</section>
<section class="half">
</section>
</div>
And The CSS Code:
.half {
height: 50%;
position: relative;
}
.half:first-child {
}
.half:last-child {
background: #950049;
}
.officePic {
height: auto;
width: 100%;
}
How can I resize the image and fitting into its parent div without stretching it? Is it still possible in CSS? Or is Java Script needed?
Thanks for help!
Create div and, the background-size:cover css tag and set position: fixed
<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>
<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>
I'm trying to force an image to scale to 100% the height of its parent div however WordPress is doing something so that the image doesn't scale when the browser changes size.
I've linked to the image statically as follows:
<div id="homepage1" class="row pt">
<div class="col-lg-4 col-lg-offset-4 centered">
<img class="homepage-logo" src="<?php echo get_template_directory_uri() ?>/images/homepage-logo.png" height="100%">
</div>
</div>
And I've set CSS for the image and parent div:
#homepage1 {
background: #eee7d5;
height: 100vh;
}
#homepage1 img {
max-height: 100% !important;
max-width: 100%;
}
The #homepage1 div will adjust to 100% of the browser window's height when the page is loaded, however the image is 671px high and if #homepage1 is less than this then the image will spill beyond its boundary. I want the image to scale to whatever height #homepage1 is.
The site I'm working on can be seen at www.heartinhand.com.au. Any suggestions greatly appreciated.
Add to your css:
.col-lg-4.col-lg-offset-4.centered
{
height: 100%;
}
You need to add a height of 100% to your image as:
.homepage-logo { height: 100%; }