Remove parent margin for a responsive image in Bootstrap - html

By using Bootstrap, I designed a page as follows:
Now, I'd like to:
remove left and right margins only for the image (that uses .img-resposive as class);
keep the image as responsive, but increasing its width according to .jumbotron size.
To be clear, the desired result is shown below:
How can I do that?
Regards, V.

Use negative margins on a wrapper for this image :
.img-responsive-parent {
margin: 0 -60px;
}
And html :
<div class="img-responsive-parent">
<img class="img-responsive" />
</div>

Related

Auto resizing image banner to fit a div conatiner

I have a banner which I want to add to my simple website , here is what I have so far
HTML
<div class="col-lg-12 main-banner">
<a href="https://www.google.com">
<img src="images/Test_09-17.png"></a>
</div>
CSS
img{
width: 100%;
object-fit:contain;
}
I want the image to fit with the div, unfortunately right now i have little space left and right side.
Check the image:
Question
What is wrong with my code?
It looks like there is padding on your image. (Based on the green to the right and left of your image.). Did you check the computed padding on the image element in your browser?
Without being able to see the HTML and CSS for the page I cannot be certain though.
Solution:
There was default padding either from the browser or other code. Setting the padding to 0 resolved the issue.

full width .col- in .container > .row

Is there a way to create a .col on a bootstrap page so that it goes all the way to the edge of it's container?
I would like the image in the example (which is in a .col-xs-12 inside a .row inside a .container) to use up all the space up until the edge of the container. I can solve this with pure JS resizing it as needed but I would prefer to solve this using pure CSS approach (if possible). As it is now I have tried several different variants of negative margins and relative positioning but all end up with it either not being perfectly aligned to the edge or messes something else up as well.
Here is a base example of how the page is coded: https://www.bootply.com/wVw5jnKa35
Here if you want to achieve your requirement than you can add custom class in your col-xs-12 class
Like this
HTML
<div class="col-xs-12 no-pad">
<img class="FullWidth" src="http://calendar.volego.ru/img/users/wallpapers/20160215081029217.jpg">
</div>
CSS
.no-pad {
padding: 0;
}
You don't need to define and use a custom class for this purpose.
simply, At line 8, change:
<div class="col-xs-12">
to
<div>

Sizing images in fixed-size-div

I created a gallery with grid layout having cells with size 285x285 pixels.
I need to populate the gallery with images of diverse dimensions, including: 285x285, 290x285, 100x200, 500x800 and so on.
My gallery is supposed to work as follow:
if the image is bigger than 285x285, get the center-top portion of it
with size 285x285
if the image is smaller than 285x285, stretch the
SMALLER dimension to 285px and get the center-top portion of it with size 285x285, but keep the original image ratio
This way, I want to fill up the entire cell space with no white holes in the grid, except for some margin between cells (5px right and 5px bottom).
I tried the following css:
.imagegallery {
padding: 2px !important;
background-position:50% 10%;
background-repeat: no-repeat;
min-height:285px;
min-width:285px;
max-height:285px;
max-width:285px;
margin-right:5px;
margin-bottom:5px;
}
However, the results is the following:
if image is larger than 285x285, I correctly get the portion of the image I want (center top)
if the image is smaller than 285x285, the LARGER dimension is stretched to 285px and the original image ratio is kept
This way, sometimes I get some white space around the images that are smaller than 285x285 in at least one dimension.
How do I fill up the white space via css?
====UPDATE====
I am using Bootstrap.
HTML example:
<div class="row">
<div class="col-md-3 col-sm-2 col-xs-1 portfolio-item img-list imagegallery"
style="background-image:url('./images/img.jpg');>
</div>
</div>
</div>
background-image:url is in style, rather than class, as the image name is built via AngularJS.
For the updated html, use the "background-size" property. With browser prefixes, this is probably the best CSS-Only solution. Also, you are missing a closing quotation for your "style" attribute.
https://css-tricks.com/perfect-full-page-background-image/
You can use CSS object-fit:cover property. This will cover the image area proportionately without stretching smaller dimensions.
Reference: https://css-tricks.com/almanac/properties/o/object-fit/

Issue with logo on Twitter Bootstrap site

So, I'm working on my first website with Twitter Bootstrap. Works great.
Now I'm trying to get the website responsive.
When I make the screen smaller(Too simulate a mobile phone screen), the logo gets bigger and bigger, until it gets too the smallest page size(I geuss?), then it jumps too a smaller size and it stays there.
Does anyone have an idea how to fix this? I want it too stay the same size...
HTML:
<div id="header" class="container">
<img id="logo" class="span2 offset1" src="img/logo.png" title="Hostellerie De Hamert">
<h1 id="deHamert" class="text-center span6">Hostellerie De Hamert</h1>
</div>
CSS:#logo{
background-color: transparent;
max-width: none;
}
And of course, bootstrap integrated.
You set the "span2" class on the image element. When using Bootstraps responsive library all "spans" will stack on top of each other instead of float from a certain screen width. I suggest you simply set the width and height of #logo to a static value.
http://jsfiddle.net/pC2xd/
Try removing the width: 100px; height: 100px to see what happens without these static values.
maybe you should try class='container-fluid'.
refer here: http://twitter.github.io/bootstrap/scaffolding.html#responsive

Background-image height 100%

I'm looking for a solution of my problem.
I am using twitter bootstrap for a mobile site and this is my outcome on mobile view:
<div class="row">
<div class="span4">
<div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/catalogimagecardealer#2x.png');></div>
<p class="metadataTitle metacell">
<span style="display: inline-block" class="ellipsis">Car Dealers</span>
<span style="table-row"></span></p>
</div>
</div>
</div>
The css of the div where my image is in:
background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 300px;"
But as you can see there is a margin between the image and the content below, does anyone know how I can fix this?
background-size:contain;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
"contain: This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area."
So your image has been scaled so that it fits into the element completely - you seem to want to use cover instead:
"cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area."
Set margin:0; padding:0; to both the image and the content below. This will remove any margin. Since HTML adds a margin by default, you need to explicitly tell HTML to remove a margin.