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.
Related
The selected logo should be visible enough.I have added media queries but not able to work it properly.The logo can be stretched width wise,but I don't know how to do that.
As of now I have done
<div class="row">
<div class="col-6">
<h3 class="eta m-0">Estimated Delivery Date</h3><br>
<h1 class="textFontAndColor">Friday 29, September</h1>
</div>
<div class="col-6">
<img src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill"><br>
<span class="textFontAndColor">EZ00093838993N</span>
</div>
</div>
The image file itself has quite a lot of whitespace around it so if possible maybe using a wrapper div to crop it would help the situation.
The styling here might not work right away, but just by eyeballing I was able to throw something together that at least for me locally worked well enough.
<div class="col-6">
<div class="imgWrapper">
<img class="logo" alt="" src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill">
</div>
</div>
.imgWrapper {
width: 400px;
height: 150px;
overflow: hidden;
}
.logo {
width: 300px;
height: 300px;
margin: -75px 0 0 -300px;
}
So the imgWrappers width and height controls the overall viewpoint thats to be shown and with logos width and height you can fix the logo image to be proper size and playing with margins get the position right.
you're using an incorrect media query syntax; the syntax for media queries is:
#media (min-width: 768px) {
selector {
property: value;
}
}
You may also simply provide the image with a unique class name, to avoid unnecessary complicated css selectors as the one you're using.
I am using bootstrap for my images. It displays the smaller image in the browser as I am using visible-xs with img-responsive.
However when I am trying to load the bigger image using media query, the screen is just blank.
I have checked the location of the image and it is there.
Could someone please point me in the right direction as to why bigger image is not being displayed with media query?
<div class="container">
<div id="my_img"><img id="pic" src="images/flower.jpg" class="img-responsive visible-xs"></div>
</div>
and in the CSS file
#media (min-width: 1200px) {
#pic{
background:url('images/flower-1200.jpg') no-repeat;
}
}
if you are using the visible-xs class then according to Bootstrap Docs, it only going to appear in extra-small screens, hiding in the rest of the screens.
If you are trying to load a new image (using the background) then you have to apply to the parent #my_img since it doesn't have the visible-xs class.
#media (min-width: 1200px) {
#my_img {
background: url('//lorempixel.com/1600/900') no-repeat;
height:900px;
max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div id="my_img">
<img id="pic" src="//dummyimage.com/100x100" class="img-responsive visible-xs">
</div>
</div>
</div>
</div>
As dippas mentioned, your #pic image will not be visible at 1200px because of the visible-xs class so you would need to set the background image of your #my_img instead. Be sure to provide the appropriate dimensions in your CSS of the image in question.
I would say that your .css files are most likely in a css folder.
If that is the case, you need to use the relative location of the image based off the location of your .css file. most likely this:
background:url('../images/flower-1200.jpg') no-repeat;
I am using bootstrap 3 to design a HTML page and right now I am facing a problem. I want my div tag container to take 100% height of the browser window but using CSS only (no javascript).
I went through lots of questions in stack overflow itself but couldn't find a solution that could help me. I don't want to use vh, as when you resize your window it wont work properly or wont show the container properly and I have 5 div tag containers and want every container to be the same size of the browser window.
p.s I don't think html or css is required as it can be answered without the code.
Is this what you want?
html, body {
height: 100%;
margin: 0;
}
#thediv{
min-height:100%;
min-width:100%;
background-color:red;
display:flex;
align-items:stretch;
position:relative;
}
.interiordiv{
background-color:blue;
width:50px;
margin:15px auto 15px auto;
}
<div id="thediv">
<div class="interiordiv">A</div>
<div class="interiordiv">V</div>
<div class="interiordiv">C</div>
<div class="interiordiv">D</div>
<div class="interiordiv">E</div>
</div>
If not please try to make it clearer, if you don't want to post code that's ok but post a mockup image or something.
All that is required is to set the 'min-height' CSS attribute of the Div you wish to re-size:
<div style="min-height: 100%"></div>
Ensure your html & body tags have a height of 100% also.
Here you go.. as you said you are using bootstrap, you might override the row class and achieve this easily.
.row{
height:100%;
}
<div class="row bg-success"></div>
<div class="row bg-danger"></div>
<div class="row bg-warning"></div>
<div class="row bg-info"></div>
<div class="row bg-primary"></div>
Here are the screen sizes I tested it with.
THESE TWO WERE FULL SCREEN DESKTOPS
THESE WERE NON-FULL SCREEN BROWSER
THESE WERE IPHONE RESOLUTION IN PORTRAIT MODE
THESE WERE IPHONE RESOLUTION IN LANDSCAPE MODE
I'm working on a website project where in the header section I have a grid of 6 images (2 rows with 3 images in each). It's not a problem to make them responsive (kinda "liquid") with max-width:100% and height:auto, however this website should be linked with some admin tool in the future, so the end user(s) could upload their own images.
Hence, I need to understand how keep these two rows of images responsive but at the same time give them a fixed height (in this case they should be 220px). When I crop the images and make them all equal in height (using Photoshop), everything works fine, but as soon as I use images with different height values, the grid starts to break. Is there any known workaround for this?
Thanks in advance!
Use percents and #media
Example :
#media only screen and (min-width : 320px) {
img {
width:40%;
height:60%; /*Images should be bigger in small devices*/
}
}
#media only screen and (min-width : 480px) {
img {
width:30%;
height:55%;
}
}
Please Note : The percent is calculated from parent. For example if you put an image in a div with width : 400px and height : 300px, it will show the image with 160px width and 180px height on device with min-height of 320px.
max-height is another choice.
Well, let's see if I understood good enough your question (my bad english, not yours).
If yoy want 2 rows, 220px height each with 3 images each filling the width of the row while keeping the same height as the parent, the problem you may have is that the images will distort to adapt to their responsive parent container.
This may not work for you as even if your images are simillar in aspect ratio (height x width) once the window width is small (responsive) they will get distorted too much.
Here is an example: I've use different sizes images some horizontal and some vertical so it can be easier to understand.
Basic html:
<div class="header">
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
</div>
Please notice that the row is 240px insteed of 220 just so you can see easily the row (with red background) and I add for the same reason a white border to the image containers.
FIDDLE
The option I would try though is to make the images fit into the container without distortion, they will fit in height OR in width, but of course, they will leave space at the sides if it fit height or on top and bottom if fit in width but at least the images will be always centered in the container:
the green color is the background of the images container:
FIDDLE
There may be better options but without the help of jquery I can't help you more
If your goal is to keep the images (or their container's) height fixed, that will mean that the images will not be stretching or contracting in a fluid way. Given that this concept is contradictory in practice, I will instead show you a 'responsive' solution that comes from making container elements themselves responsive rather than instead of the images.
The case you're referring to (2 rows 3 images) sounds like a great place to implement a cascading images look-and-feel. When the page width shrinks the images will float under each other whereas viceversa when the website width is stretched; this in essence achieves a fluid and responsive functionality without affecting the image heights themselves. The below code should apply the 'building blocks' you'll be needing for in order to achieve this effect... granted there is a lot of custom work you can do here (like using background: cover, instead of img tags as suggested in the comments). Take a look and let me know if this helps you get closer to what you're trying to achieve.
HTML
<div class="wrapper bg-purple center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
<div class="clear-both"></div>
<div class="wrapper bg-cyan center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
CSS
.wrapper {
display: table;
}
.img-container {
height: 50px;
padding: 2px;
}
.center-div {
margin: 0 auto;
}
.left {
float: left;
}
.clear-both {
clear: both;
}
.bg-purple {
background-color: purple;
}
.bg-cyan {
background-color: cyan;
}
#media only screen and (max-width: 450px) {
.left {
clear: both;
}
}
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.