How to scale up images in bootstrap 3?
Images in Bootstrap 3 can be made responsive-friendly via the addition
of the .img-responsive class. This applies max-width: 100%; and
height: auto; to the image so that it scales nicely to the parent
element.
With the following code the image scales down well, but it's not get the parent div's size on larger screens.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-md-5" style="background:yellow">
<div class="image-container" style="background:green">
<img src="http://placehold.it/350x150" class="img-responsive">
</div>
</div>
</div>
How to do that? Demo: http://www.bootply.com/8uXBxX8Qjy
You can set the image width to 100%. The img-responsive sets max-width to 100%, the image itself will never be larger than it's actual dimensions. Setting the width to 100% will force it to be the width of its parent regardless of its actually size, but be warned that this can sometimes cause images to become pixelated depending on the image size and how much it is being scaled to fit.
I previously had this issue, I was using a theme based on Bootstrap 3.
I was using the theme in Wordpress live site.
Problem
The problem was that, image enclosed in img tag and which further was enclosed in Wordpress's own class defined for image. And the image not properly scaled.
Images having low width would fit inside the main div, in which the image was placed, some images having big width, going outside of the main article. And using such broken CSS functionalities is a havoc for my website. Until I found the solution.
Solution
Find which img tag is responsible for image scaling, you can test in Browser's inspect element, and find which tag is responsible for image scaling. And put the below code there and test. And your theme could have different tag responsible for img scaling property set with Bootstrap.
For mine it was :
img{
vertical-align: middle;
width: 100%;
height: auto;
}
The theme already had, img{vertical-align: middle} present, so I tested for width:100% and the rest CSS rule, and it worked. Your theme could have some differnt CSS rule or tag set, find that and apply. But these two rules should be applied to scale image properly. Thanks #David Taiaroa for height: auto CSS rule
Related
I am currently using gatsby for a project and when i put gatsby Img component inside Link component so that it's clickable, the image gets shrinked to its parent component(the link component). i know gatsby fluid Img stretches or shrinks to its parent's width but i want it to show as full image. i tried using fixed instead of fluid but it didn't work and it's even tried specifying width while querying.
code
frontend part
It seems clearly a CSS issue since your <Link> is shrinking to the text (sssssssssss) length.
Debug your .thumbnail class and the component to see what's happening inside. For example, a CSS rules like the following will work but maybe don't fit your design specs:
.thumbnail{
position: relative;
width: 100%;
}
.thumbnail a,
.thumbnail img {
width: 100%;
}
Take a look at the resultant HTML output the adjust your selectors, since gatsby-image wraps the <Img> inside a nested structure, what may affect your CSS rules.
It seems that you are using Bootstrap (hence the w-100) so try adding it to the wrapper (<Link> component),
I am using Laravel-Snappy for generating pdfs with wkhtmltpdf. I want to add a border in all pages that are created in the pdf file. At the moment, I have added this to the css:
body.pdf {
border: 1px solid #000;
}
My pdf html is like this:
<html>
<head>
<title>{{ $title }}</title>
</head>
<body class="pdf">
.....
</body>
</html>
With the above css, the border shows fine if it is a single page pdf. However, when it has multiple pages, the border breaks at the bottom of the first page and no more border shows from page 2 onwards after the page-break. I also read the documentation and I dont think there is an feature to add borders using setOption().
Is there a way to resolve it so the border appears in all pages when pdf is generated?
Please take look at here, you can find all available options available including border.
You didn't mentioned how you used page break.
I am using this way
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
Working fine for me
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
I am customizing my website using Twitter Bootstrap. I am trying to insert an image positioned as the top layer, is located slightly "outside of the container", and can responsively resize while staying proportionate / in relation to the other elements. I would like to use position: relative, but the image seems forced into a box within the container. When I use position: absolute, the image displays correctly at first on my web browser, but it does not behave as intended when the screen is resized.
Can anyone help me figure out a good solution to this issue?
HTML: I do not have the image contained within it's own , but is still located within the overall . Here's the code:
<img src="images/hero-babee.png" alt="Babee blowing bubbles." id="babee-bubbles">
CSS: Here's my custom css.
img#babee-bubbles {
z-index: 100;
position: relative;
top: 51%;
left: 7.5%;
}
I'd appreciate any help finding a solution and/or help with my code / syntax. Thanks in advance.
To design responsive website using bootstrap you can use bootstrap layout.
Fluid layout has class "row-fluid" and you can specify width in using class as span.
this structure will be responsive. to test it just resize your browser window.
<div class="row-fluid">
<div class="span2">
<img>....</img>
......
</div>
<div class="span2">
</div>
......
</div>
Bootstrap devide screen size in 12 part. we can use that part by giving
class="span*"
* is no of part.
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options