I been trying to make a page with four responsive images in it arranged in blocks.
Like two images on first row and two on second row.
And since responsive i tried to make them shrink while staying at their places.
But it kinda juggles all around while i try to resize the window.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#image1 {
position:relative;
float: left;
padding-left: 10px;
margin-left:250px;
border:1px solid;
}
#image2 {
position:relative;
float: left;
padding-left: 10px;
margin-left:300px;
border:1px solid;
padding-bottom:10px;
}
#image3 {
position:relative;
float: left;
margin-left:250px;
padding-top:10px;
border:1px solid;
}
#image4 {
position:relative;
float: left;
padding-top:10px;
padding-left: 10px;
margin-left:300px;
border:1px solid;
}
<div class="container">
<h2>Image</h2>
<p>This text is responsive too</p>
<img class="img-responsive" src="img.png" id="image1" alt="Chania" width="150" height="150">
<img class="img-responsive" src="img.png" id="image2" alt="Chania" width="150" height="150">
<img class="img-responsive" src="img.png" id="image3" alt="Chania" width="150" height="150">
<img class="img-responsive" src="img.png" id="image4" alt="Chania" width="150" height="150">
</div>
Any suggestion is greatly appreciated..
First off. I see you are using bootstrap. Make sure you are utilizing the built in grid layout system. Your container won't be used unless you set rows and columns. That will handle most of your responsive behaviour.
Then you need to set two images in a row.
Not sure why you'd set the images position. Unless you are making the images reach outside the container you really don't need to utilize the positions.
If you do need the position. Then the parent will have the relative property. The child you want to move will be set to absolute. Google mdn position for more info on the properties. Note: if you don't set the position of the child to absolute, then that element will remain in the normal flow and ignore the relative parent.
Something like this might get you headed in the right direction:
<style>
parent-div {
position: relative;
}
child-image {
position: absolute;
left: 0;
top: 0;
}
child-text {
position: absolute;
bottom: 10px;
left: 0;
z-index: 10; /*set text above image*/
}
img {
width: 100%; /* fill to parent */
}
</style>
<body class="container-fluid">
<div class="row">
<div class="col-md-6 parent-div">
<p class="child-text">This text is responsive too</p>
<img class="child-image" href="" alt="">
</div>
<div class="col-md-6 parent-div">
<img class="child-image" href="" alt="">
</div>
</div><!-- End of row -->
<div class="row">
<div class="col-md-6 parent-div">
<p>This text is responsive too</p>
<img class="child-image" href="" alt="">
</div>
<div class="col-md-6 parent-div">
<img class="child-image" href="" alt="">
</div>
</div><!-- End of row -->
</body><!-- End of page -->
Related
I'm using the Bulma grid framework to customize part of the interface for our Learning Management System. I have a simple vertical nav (1 column on larger screens) on the left and then there is a large promo banner in the middle (8 columns wide on larger screens) with a smaller promo banner to the right (3 columns wide on larger screens). I have it setup so that all three items show on desktop-sized screens, and then at slightly smaller breakpoints I have it so that only the nav and the large promo show, and then on mobile I have it so that only the nav shows.
The issue I'm having is that I can't get the height of the smaller promo banner on the right to match that of the main promo. I've tried adjusting the dimensions of the image placeholder so that it's not square (like it currently is) and no matter what I do it's either slightly shorter or slightly taller than the main promo. I need them to be the same height when both are in view.
Originally I had it setup so that the images stayed a static size and were just "cropped" as they shifted using
object-fit:cover;
but that doesn't work IE11 which unfortunately is a requirement (and is also not ideal since these images will be promo banners and parts would be getting cut off)....so that's why I'm trying to figure this way out to have them resize appropriately.
Here is a JSFiddle so you can see what I mean: http://jsfiddle.net/markb088/zpfbc7y3/5/
Here's the code from the JSFiddle in-case it becomes unavailable:
html{
overflow-y: hidden !important;
}
body{
overflow-x: hidden;
background-color:#f3f3f3;
}
a.navLink{
position:absolute;
width:100%;
height:90%;
top:0px;
right:0px;
text-decoration:none;
z-index:10;
background-color:white;
opacity:0;
filter:alpha(opacity=0);
}
.menuContainer{
background-color: white;
border: 3px solid #d9d9d9;
/*height: 350px;*/
font-size: 0.8em;
font-weight: bold;
line-height:1.2;
}
#media only screen and (max-width:768px){
.columns{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.respImg{
/* height:350px;*/
width:100%;
/*object-fit: cover;*/
}
.imgHolder{
position:relative;
overflow:hidden;
}
.navItem1, .navItem2, .navItem3{
position:relative;
/* height:110px;*/
padding-top:10px;
}
#media only screen and (max-width:631px){
.regQuickNav{
display:none;
}
.menuContainer{
height: 125px;
}
}
#media only screen and (min-width:632px){
.mobileQuickNav{
display:none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<body>
<div class="columns" style="margin-left: 2rem; margin-right: 2rem; margin-top: 6px;">
<div class="column is-1-fullhd is-1-widescreen is-1-desktop is-2-tablet is-12-mobile is-flex-desktop-only is-flex-tablet-only">
<div class="menuContainer">
<div class="mobileQuickNav">
<div class="columns is-mobile " style="margin: 0 0 0 0;">
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
<div class="regQuickNav">
<div class="columns" style="margin: 0 0 0 0;">
<div class="column is-full">
<div class="navItem1"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
<div class="navItem2"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
<div class="navItem3"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-8-fullhd column is-8-widescreen is-11-desktop is-10-tablet is-10-mobile is-hidden-mobile">
<div style="background-color: blue; overflow: hidden; position: relative;"><img class="respImg" src="https://i.imgur.com/GH2QEuJ.png" /></div>
</div>
<div class="column is-3-fullhd column is-3-widescreen is-hidden-tablet-only is-hidden-desktop-only is-hidden-mobile">
<div style="background-color: red; overflow: hidden; position: relative; border: solid 1px #999999;"><img class="respImg" src="https://i.imgur.com/jqbRA3S.png" /></div>
</div>
</div>
</body>
*Note that you'll need to expand the results panel and your browser wide enough so that the smaller promo banner shows. Majority of the CSS is included in the head tags of the html, due to the restrictions of the LMS.
I'm not overly familiar with grid systems, so not sure if I'm missing something to make it show with a matching height but still be responsive.
Thanks!
If you have the option to add the image as a background, you can use the following CSS:
.column {
background-size:cover;
}
It will also work with IE11.
The other option which will distort your image aspect ratio is to set a min-height value to the image:
.respImg {
min-height: 300px;
}
I have a gallery and the thumbnails are set to have a width of 100%. however some images do not fill the full height of this div.
How do I get it so that the images stretch over the full width and height of the div? (can't be changed to background images)
<div class="gallery-grid">
<div class="section group">
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
</div>
<!--style-->
.gallery-grid img{
width:100%;
}
It works for me. You must have some other css affecting it. See here: http://codepen.io/anon/pen/JGmRBW
.gallery-grid img{
width:100%;
}
Try this:
gallery-grid .section .col a{
display: block;
}
.gallery-grid .section .col a img {
width: 100%;
height: 100%;
}
You should consider that a is an inline element, so to put an image propely in it, you may need to set its display property correctly.
In action
a{
display: block;
width: 100px;
height: 100px;
}
img{
width: 100%;
height: 100%;
}
<p>The parent anchor has 100x100 dimensions:</p>
<p>The child image has 100x50 dimensions:</p>
<img src="https://placehold.it/100x50">
very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.
Trying to get to look like this:
https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8
Thanks in advance
Here is my CSS/HTML files:
.img {
position: relative;
float: left;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
.text2 {
position:relative;
left:200px;
top:400px:
}
.text3 {
position:absolute;
left:300px;
top:400px:
}
.text4 {
position:absolute;
left:400px;
top:400px:
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="about.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Title</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Links</li>
<li>LinkedIn</li>
<li>Github</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xx.jpg" class="img-circle img">
<div id="text1">
<p>TEXT UNDER PIC 1</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 2</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 3</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 4</p>
</div >
</div>
</body>
</html>
http://codepen.io/lostdino/pen/LpKKra
I wasn't sure if you wanted to keep your HTML structure or if it was open to revision so I just worked within the constraints your provided. What I did was remove your floats and instead use display: inline-block which will stack elements horizontally rather than vertically within their container. You can see I've also used [id*="text"] which will allow the capture of any elements with an id that contains 'text'. I'd suggest also moving away from pixels and go for a more responsive unit such as percentages or rem. If you think there is value in me showing you how I would approach this problem I'm more than happy to throw a quick example together for you. I hope this helps.
.img {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
[id*="text"] {
width: 250px;
display: inline-block;
}
With respect to the other answers assuming there is an image and caption relationship between the text and the images then a possible improvement to the solution would be as follows:
http://codepen.io/lostdino/pen/PPrryZ
.gallery img {
position:relative;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.gallery {
padding-top: 100px;
padding-left: 10px;
position:relative;
}
.gallery > figure {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
}
The HTML of the gallery restructured like so:
<div class="gallery">
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
</figure>
</div>
The reason your text isn't aligning as you'd wish is because <p> and <div> are block level elements by default, which means they'll fill space and start on new lines. To remedy this, you could change the display property to be inline.
That said, you're approaching this wrong, you're not grouping your image and the caption together. Your structure should be more along these lines:
<div class="container">
<!-- Image One -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Two -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Three -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
You would then set your desired widths on the .image-container class, and your image and captions will follow suite.
Your paragraphs are not nested in the proper order to achieve this. Make sure you place the paragraph tags within the div tag that contains the images.
Also, use the inspect element tool when you refresh your browser. In Google Chrome, go to View, Developer, and select Developer tools. A new window will appear at the bottom of the browser. When you hover over the font-end interface, the page will highlight your html nesting-structure.
Hope this helps, let me know if you have any more questions!
What I want to do is have the images on this site change in width and height (they should be equal) between 50-60px. However between them they all need to have a minimum padding of 5px. This can vary depending on the size of the images, this is the case as the two end images need to fit to the edges of the parent div, to align with an image about it. The height/width/padding should all change to ensure the images are still properly aligned when then screen size changes.
If you look at this page you will be able to see what I mean. The images that need to change are the grey squares at the bottom.
http://media.gaigo.org/work2.html
This is my html:
<div class="smallImages">
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
</div>
and my css is as follows:
smallImages div {
display: inline-block;
padding: 5px;
}
.smallImages div img {
max-width: 60px;
min-width: 50px;
max-height: 60px;
min-height: 50px;
}
Sorry if this seems confusing. Just ask if you need me to explain more.
One option is to set percentage widths, however that number percentage is dependent upon the number of images in your row. See this example:
* {
box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */
}
.container {
width:400px; /* set this to whatever you like, it should work still */
padding:5px;
border:1px solid;
}
.row {
width:100%;
padding:0 5px;
}
.row img {
padding:5px;
}
.row.one img {
width:100%;
}
.row.two img {
width:50%;
}
.row.three img {
width:33.33%;
}
.row.four img {
width:25%;
}
<div class="container">
<div class="row one">
<img src="http://placehold.it/150x150">
</div>
<div class="row two">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row three">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row four">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
</div>
Putting HTML comments between lines means there's no white space between the images.
This is what you are after.
Display inline-block wont let the images behave in that manner you need to use table.
You should just check the source code of the site you are working from..
.row {
display: table-row;
}
.smallImages {
padding-left: 0px;
margin-bottom: 0px;
display: table;
text-align: center;
}
.smallImages .row div {
display: table-cell;
padding: 5px;
}
.smallImages .row div:first-child {
padding-left: 0;
}
.smallImages .row div img {
max-width: 100%;
}
img {
border: 0;
}
<div class="smallImages">
<div class="row">
<div>
<a href="#item-1">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-2">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-3">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-4">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-5">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-6">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-7">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-8">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-9">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-10">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-11">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-12">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
</div>
</div>
The goal is that I want both images to have be side by side and centered in the middle of the row.
I tried to do that via adjusting the columns of the row
The problem is that even with trying to center via rows, it always looks a little off center and if I change the max-width to be a little bigger, the images are no longer side by side and are on top of one another
The height and width of the images are...
graft1/graft2 - height="333" width="500"
ivan1/ivan2 - height="542" width="400"
Here is my HTML
<section class="wrapper style1">
<div class="container">
<div id="content">
<!-- Content -->
<article>
<header>
<h2>Before and After</h2>
</header>
<div class="row">
<div class="div_baPics">
<img id="graft1" class="baPics" src="images/graft1.jpg" alt="">
<label for="graft1">Before</label>
<img id="graft2" class="baPics" src="images/graft2.jpg" alt="">
<label for="graft2">After</label>
</div>
</div>
<div class="row">
<div class="div_baPics">
<img id="ivan1" class="baPics" src="images/ivan1.jpg" alt="">
<label for="ivan1">Before</label>
<img id="ivan2" class="baPics" src="images/ivan2.jpg" alt="">
<label for="ivan2">After</label>
</div>
</div>
</article>
</div>
</div>
</section>
And here is the CSS for baPics
.baPics {
max-width: 30%;
}
.div_baPics {
text-align: center;
}
Since you're using Bootstrap, I went with its system. See this fiddle :
http://jsfiddle.net/Bladepianist/55gyp94n/
Well, i did use real image so that you could see the result but with that (when I tested anyway), your image should resize, following the screen.
.thumbnail {
border: none;
}
This code isn't needed, unless you don't want the border of the thumbnail ;).
Hope it will satisfy you and if that's the case, thumbs up :p.
You need to wrap img and corresponding label in a wrapper, like so:
/*Just to make a difference between pics*/
body {
background: grey;
}
/*Minimal CSS*/
.div_baPics {
text-align: center; /*Center alignment for the wrapper*/
font-size: 0; /*To remove the white space between pics*/
}
.pic {
display: inline-block;
}
.pic img {
display: block;
/*This should be set by default by Bootstrap*/
max-width: 100%;
height: auto;
}
.pic label {
display: block;
font-size: 16px; /*Or whatever font-size you use*/
}
<div class="div_baPics">
<div class="pic">
<img src="http://i.imgur.com/zNTWaR3.jpg" />
<label>Pic 1</label>
</div>
<div class="pic">
<img src="http://i.imgur.com/IqiJN2f.png" />
<label>Pic 2</label>
</div>
</div>