How to make image inside div not to be bigger than the div? now I set width is set to 500px what is not a good solution.
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-md-12 col-lg-12 col-sm-12 col-xm-12">
<div class="col-md-6 col-lg-6 col-sm-12 col-xm-12"">
<img src="imagesource" class="img-responsive" width="500" height="auto">
</div>
</div>
</div>
</div>
Setting
img {
width:100%;
}
or
<img style="width:100%;"/>
will make sure that an img is never wider than its parent container.
You should remove your inline styles (width and height) for <img>. Also remove double quotes here col-xm-12"">
Jsfiddle here
Related
I am working on an angular project where I am getting the data in image and title and location. I tried to make a responsive div but unable to make them in one size.
<div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body py-0 text-center">
<input [checked]="true" type="radio" formControlName="scope" (click)="nextFormPostion(nextFormPostionName)" (change)="nextFormPostion(nextFormPostionName)" id="img{{company.scope}}" class="d-none imgbgchk" value="{{company.scope}}">
<label for="img{{company.scope}}">
<div class="row justify-content-center">
<div class="col-12" style="height: 6rem ; display:table-cell; vertical-align: middle;">
<img src="{{company.logo}}" class="mt-1 img-fluid mh-100" alt="Image 1">
</div>
<div class="col-12 mt-2" style="min-height: 3rem;font-size: 12px;text-transform: none;">
<span>{{company.company}}</span>
</div>
<div class="col-12 mt-1" style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
<span>{{company.country}}</span>
</div>
</div>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
</div>
company.logo is the image path and company.company is the name of the company. I want to make image in vertical and horizontal align center and if company name length is new line it change the size of all divs.
You don't need bootstrap exactly to do that you can use JavaScript to get the div side you want and apply as width + height.
Also you can use CSS with, for example:
width: 100%
The first thing you need to check if you have any border, margin, padding that is affecting your code. I don't know, I don't have enough information. But I believe it could be because Bootstrap puts automatic padding on .row
For this you can put
<div class="row g-0">
</div>
Bootstrap 5 - No gutters
Or if it is in another element, simply add the px-0 class that removes the padding from the widths.
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content"></div>
</div>
</div>
</div>
I do not have a definite css yet, I still think how I can do this
How can I make the image full width inside a container, just like in the example using bootstrap, The black border is the bootstrap container
What I try to do is the content in a container and the image outside of that container,
Just set these properties--
.imagen img{
width: 100%;
max-width: 100%;
}
Here you go with jsfiddle https://jsfiddle.net/9drawa3h/1/.
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content">
<img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2013/04/13/how-to-do-free-online-background-check/_jcr_content/par/featured-media/media-1.img.jpg/876/493/1422493303787.jpg?ve=1&tl=1" />
</div>
</div>
</div>
</div>
I know you are looking for text-content in the second column, but I specified something else.
As I not sure whether you are going to use img tag ro background-image in the 1st column, so I have provided both.
1st Column with background-image and 2nd column with img tag.
I have an image, 'img.icon-avatar set within some html: http://jsbin.com/moqagu/5/edit?html,css,output
How can I force the image to be 100% width (as is now), but clipped to the height of it's parent element, so (in the example) it doesn't push the next panel down, and respects or includes the padding?
html:
<div class="row">
<div class="col-xs-3">
<div class="icon-avatar">
<img class="icon-avatar img-rounded" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" alt="avatar"/>
</div>
</div>
<div class="col-xs-9">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Title
</h3>
</div>
<div class="panel-body">
Content
</div>
</div> <!--panel -->
</div>
</div> <!-- row -->
css:
div.icon-avatar {
?
}
img.icon-avatar {
width:100%;
?
}
Note that the parent element's height is not fixed, and will be based on other elements on the page, so I need the parent element to ignore the image when determining its own height.
like that:
div.icon-avatar {
text-align: center
}
img.icon-avatar {
width:auto;
max-height:90px;
}
In a bootstrap 3 grid, one of the columns contains an image. How can one make it 100% height of another column? (with biggest height)
img-responsive will fit the width, but not the height. Here's a fiddle: http://jsfiddle.net/mariusandreiana/V2Hy6/17/
<div class="container">
<div>some content</div>
<div class="row bg">
<div class="col-xs-1">Text</div>
<div class="col-xs-6">
<p>
<h1>John Dough</h1>
1155 Saint. St. #33
<br/>Orlando, FL 32765</p>
</div>
<div class="col-xs-5">
<img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501">
</div>
</div>
<div>more content</div>
</div>
Desired result: image's height is from "John Dough" to "Orlando", and the width should be proportional.
One option would be to use javascript to set img's height, but can it be done only via CSS? Would a table be a better fit than the grid?
Note: the "John Dough"'s contents are unknown, it's final height is known only at runtime.
You have to set a max-height to the parent :
Fiddle : http://jsfiddle.net/V2Hy6/19/
CSS :
.bg {
background-color: #FFAAAA;
height:100%;
}
.img-container{
height:100%;
max-height:200px;
}
img{
height:100% !important;
}
HTML :
<div class="container">
<div>some content</div>
<div class="row bg">
<div class="col-xs-1">Text</div>
<div class="col-xs-6">
<p>
<h1>John Dough</h1>
1155 Saint. St. #33
<br/>Orlando, FL 32765</p>
</div>
<div class="col-xs-5 img-container">
<img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501">
</div>
</div>
<div>more content</div>
</div>
I've a fluid row in which i have a item (nontext) and I want to align it horizontal centered
text
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center">
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
</div>
this works pretty fine
but as soon as I add a max-width and max-height the alignment doesn't work anymore.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center;max-height: 300px; max-width: 400px" >
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
What am I doing wrong ? How can I set max width and hight and have a centered alignment?
To follow bootstrap rules, try to center it with the offset class
<div class="row-fluid">
<div class="span4 offset4">
<img src="yourimage" />
</div>
</div>
see documentation
Applying max-height and max-width on one of Bootstrap's span# classes will override grid styling. I would recommend adding the height/width on the image (if the text align doesn't work, you can try margin: 0 auto on the image.