I used bootstrap classes for designing my webpage.But image size and text size dragged while i minimizing the window.How to it?
<div class="col-sm-3 col-md-3">
<div class="panel panel-success" style="height:200px;">
<div class="panel-heading"><b>TIMESHEET</b></div>
<div class="panel-body">
<a href="#routes.Timesheets.showSelectPage()"><img src="#routes.Assets.at("images/tabImages/timesheet.png")" class="img-responsive center-block" alt="Image" style="width:17%;"><p class="text-muted">Timesheet Processing</p>
</a>
</div>
</div>
css:
.panel-success{
height:220px;
}
.panel-heading{
text-align:center;
font-size:22px;
padding:5px 0px 5px 0px;
}
.center-block{
width:45%;
}
.panel-warning{
height:200px;
}
If using bootstrap , you may find help here Response Images in Bootstrap
If text is getting distorted, i'd recommend checking your bootstrap classes.
For your text I would suggest placing this in your body font-size:62.5%
Then instead of using 22px, use font-size:2.2rem;
This should help with the text. Now for you image try setting it's width in % Then it will scale nicely after resizing
Remove the style: width: 17% from your img. img-responsive class from bootstrap should automatically take care of your image resizing. For the text part, as mentioned above, use % or media queries to define styles for different devices
Related
with Bosstrap3/.
I have 2 image. One image is big. another is small.
both of image are responsive.
I want put small image on big image.
It's easy for a static page. But I want do it for a responsive page.
I want position of images not be change with resize of page.
I try this:
<div class="container">
<div class=" panel panel-default">
<div class="panel-body" style="padding:1px">
<img class="img-responsive" src="http://placehold.it/1170x300" alt="Chania">
</div>
<div class="panel-footer">
View all <h4>Bootply Editor & Code Library</h4>
</div>
</div>
</div>
<img class="img-responsive mytumb" src="http://placehold.it/150x150/000">
AND css code:
.mytumb{
position:absolute;
top:50px;
left:40px;
}
But it works for an static page.
How can I do it?
https://jsfiddle.net/DTcHh/18935/
You can go here for a solution position one image above another , you will surely get a solution. Happy Coding!
You can add your image inside your .container div so it is in absolute position relative to this container.
Like this
And then, play with media queries to make it fits everytime.
.container { position: relative; }
#media (max-width: 767px){
.img-responsive.mytumb { width: 20%}
}
It is not perfect but you've got the idea I suppose.
I'm trying to line up three pictures within a bootstrap grid. All of the images were centered, which is what I'm trying to, before I added a img-responsive class to one of the images. I do however want the images to be responsive while also making them a tiny bit larger than they are already. Tried numerous things such as "width: 200%;" however without success
How it looks
I created a "center-all" class within my css that should center all the three of them, and it did work, just until I added the img-responsive class to the red one. The class was not added to any of the other images.
.center-all {
text-align: center;
align-items: center;
align-content: center
vertical-align: center;
}
JSFiddle
https://jsfiddle.net/8a6ee7f5/
Images doesn't work in Fiddle ofc.
What I want to achieve:
I want the images to be 2 times larger than what they currently are and I want them to be responsive while still keeping them centered.
Thanks in advance!
I found the answer to my question(s).
When adding the img-responsive class to the image it moves to the left. By adding "center-block" to the class to the image it should stay in the center.
<img src="..." class="img-responsive center-block">
Now I just need to find the answer on how to upscale my pictures to 200%.
EDIT:
I found the following to upscale my images:
CSS
.wrapper {
width: 40%;
}
and added that to my image class.
HTML
<img src="..." class="img-responsive center-block wrapper">
And that fixed it.
So bootstrap already has an element centering class called .text-center you can just add this class to the row wrapping your items and everything in that row will be centered. Then instead of using .img-responsive you can add a width to the image instead or give the image a percentage width. It will maybe look something like the following hopefully this is what you are looking for:
Here is a fiddle Updated Fiddle
note: I have added a border-radius of 50% to your images because I assume you want them to be round. If you want to use 100px you can change it back.
Css:
#values img{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 80%;
}
#val1 {
background-color: #792c24;
}
#val2 {
background-color: #4f5e6d;
}
#val3 {
background-color: #665e25;
}
Html:
<div class="container" id="values">
<h3 class="fancy">Values</h3>
<div class="row text-center">
<div class="col-sm-4">
<h4>Independent</h4>
<img id="val1" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Team Player</h4>
<img id="val2" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Dedicate</h4>
<img id="val3" src="http://placehold.it/300x300">
</div>
</div>
</div>
What I'm trying to achieve is the image outside of the parent div's boundaries, which works in 1280x1024. How can I make this effect responsive?
Html:
<div class='row'>
<div class="divider">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
<img src="http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/responsive.png" alt="laptop tablet phone responsive"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
<h1>bla bla bla.</h1>
</div>
</div>
</div>
CSS:
.divider{
margin-top:100px;
min-height:175px;
margin-bottom:100px;
background-size: cover!important;
background-attachment: scroll;
background-image: url('http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/triangles.svg');
}
.divider div{
top:-50px;
The following image show's my problem, with the top half being the desired effect. And the bottom half is what happens when resizing the screen to smaller resolutions.
The problem seems to be that the image is resizing itself but the parent div is not, in this case I would change the values in pixels to values in vh and vw (these are percentages of "viewport height" and "veiwport width": the height and width of the window you are resizing.) for example:
margin-top:100px;
would become
margin-top:8vh;
By placing both the background image and the front image in HTML, and adding the following css rules they both scale the same.
.divider div{
top:-50px; // placing the image slightly above the divider div
height:125%; // making the div containing the image bigger than the divider div
}
.divider img{
width:100%; // just for this image because it isnt wide enough
position:absolute; // make sure the image listens to top:-50px;
}
ps: the images scale because of twitter bootstrap's css:
img {
height: auto;
max-width: 100%;
}
Need to place images kinda like here (for example): http://imgur.com/QpRjvpW
Original pictures of different sizes.
Hover effect - blur and fogging effects and text on the middle of the picture.
Here is what I got for now: JSFiddle
So the question, how correctly position them, so that they occupy the entire width of the screen by 3 in a row, gonna be same size, closely adhering to the upper and lower div and to each other, don't expand within its borders? And the effect of the blur doesn't touch neighboring elements?
Remove class row and col-lg-12,use col-sm-12 like
<div class="col-sm-12">
<div id="work1" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03257/POTD-SKY-SQUIRREL_3257854k.jpg">
<p class="text">ONE</p>
</div>
<div id="work2" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg">
<p class="text">TWO</p>
</div>
<div id="work3" class="col-sm-4">
<img class="image" src="http://s.hswstatic.com/gif/dolphin-pictures-1.jpg">
<p class="text">THREE</p>
</div>
</div>
CSS:
works img {
height: 600px;
width: 100%;}
Apply this css, you'll get the look like the example --
.works img{
display:block;
max-width:100%;
}
.works [class^="col-"] {
padding-left:0;
padding-right:0;
}
.works .text{
position:absolute !important;
left: 0;
right: 0;
}
I have an image which its size is 1050x700. I would place it in full screen when it is in desktop. the idea would be to place it when is in desktop version under the black bar in this way the image remain almost the same.
here it is the jsfiddle example http://jsfiddle.net/qLdp4czn/1/
in the mobile there is no problem because it fit the device display so it should back normal without placing it under the bar
here is the code:
<div class="container-fluid top-bar">
<div class="row-top">
<div id="central-block" class="text-center">
<p>Title</p>
</div>
</div>
</div>
<div class="img-background">
<img src="http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg" alt="animal" class="img-responsive">
</div>
Put the image as a background-image instead and remove the img element:
.img-background {
background-image:url(http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg);
background-repeat:no-repeat;
background-size:100% auto;
position:relative;
width:100%;
height:100%;
}
You might have to set the width and height of the element depending on your other CSS.