In responsive page layout, I want to increase the height of image keeping the width constant.
When I change image width, it reflects but changing the height does not make difference.
So I added 100% height to parent div .content container. But that also does not make any difference.
How can I increase the height here keeping width constant?
FIDDLE : http://jsfiddle.net/g83e8/
I have used container as below:
<div id="content1" class="content">
<div class="container">
<div class="img-container1">
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded">
</div>
<div class="text-container">
<p>TEST</p>
</div>
<div class="another-container">
<p>TEST</p>
</div>
</div>
</div>
css:
.content > container {height: 100%;}
.img-container1 { float:left; height:60% !important; width:50%}
To increase the height of the image only, you can use styling like this:
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded" style="height: 100px">
Using pixels instead of percentages allows you to more easily control the size, as the size is not inherited from the parent elements when using pixels.
Related
I need to implement the CSS for the image (attached).
Gallery
I'm retrieving 6 images from third party. I need to display the images so that all 6 images display on the different screen widths. I'm only optimizing for screen widths >= 1024px. So if the screen width is less than 1024px the images are the same size as the images would be at 1024px. 2 of the images have an aspect ratio of 1:1. Two have an aspect ratio of 4:3. Two have an aspect ratio of 16:9.
How would you display the images using CSS so that all of the images show as the screen gets smaller (up to 1024px in width), and maintain the aspect ratio? Basically, how would you implement the CSS to make this row of images responsive?
Right now I have the following structure:
<article class="sample">
<img src ="ex1.jpg" />
</article>
<article class="sample">
<img src ="ex2.jpg" />
</article>
<article class="sample">
<img src ="ex3.jpg" />
</article>
<article class="sample">
<img src ="ex4.jpg" />
</article>
All of the images need to have the same height while keeping their aspect ratio.
I'm using inline block on the "sample" element. I set a height for all images for each screen width breakpoint (1024, 1280, 1440) and set the width to auto.
so at 1024, I set the height of img to 150px. At 1280, I set the height to 160px. At 1440px, I set the height of img to 166px. I was given advice to set the height to Xvw instead of setting a height for each breakpoint.
I assume you are trying to recreate something similar to your gallery, I thought about using the css display:flex property.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here's the code:
HTML:
<div class="container">
<div class="article" style="flex-grow: 1.77">
<img src="http://www.lorempixel.com/177/100" alt="">
</div>
<div class="article" style="flex-grow: 1">
<img src="http://www.lorempixel.com/100/100" alt="">
</div>
<div class="article" style="flex-grow: 1.33">
<img src="http://www.lorempixel.com/133/100" alt="">
</div>
<div class="article" style="flex-grow: 1" >
<img src="http://www.lorempixel.com/100/100" alt="">
</div>
<div class="article" style="flex-grow: 1.77" >
<img src="http://www.lorempixel.com/177/100" alt="">
</div>
<div class="article" style="flex-grow: 1.33">
<img src="http://www.lorempixel.com/133/100" alt="">
</div>
</div>
CSS:
.container {
display: flex;
width: 100%;
min-width: 1024px;
}
.article img {
width: 100%;
height: auto;
}
Fiddle:
https://jsfiddle.net/xmqLrtbk/
Set one dimension using percent, and the other auto. example:
img{width:100%;height:auto;}
jsFiddle Demo
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 a problem with Bootstrap css. I have a panels with header, body and footer. The body contains an image. Each of the images have been resized to the same 700px width and 450px height. Yet the panels end up different sizes with the footer not being aligned to each other.
How can this be fixed?
.cshtm code:
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">
Visual Similarity Duplicate Image Finder
</div>
<div class="panel-body">
<a href="portfolio-item.html">
<img class="img-responsive img-blog img-hover" src="#ViewBag.AccreditationImage2" alt="">
</a>
</div>
<div class="panel-footer">
<p>Accreditation test Progress: 10%</p>
<p>Version: 5.5.0.1</p>
<p>Vendor: MindGems, Inc.</p>
</div>
</div>
</div>
and the ubiquitous image:
UPDATE
It turns out the natural height of the images are indeed different even though they were all resized the same. Anyway, how can I force the images in the panel to all be the same size?
Can't tell what is happening in your case specifically without seeing the css but you should just be able to set the height attribute on the image or container:
<style>
.panel-body {
height : 450px
}
</style>
or:
<style>
.panel-body img {
height : 450px
}
</style>
I am using Bootstrap. In the following markup, when the browser window width is reduced to minimum, image spills over and not totally 100% visible.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<h1 style="display:inline;">Some heading here</h1>
<img src="http://feedsinsight.com/Content/logo.png" style='height:38px;vertical-align:bottom;float:right;' />
</div>
</div>
How can I fit it?
You should use bootstrap's img-responsive class with a max-height rather than a fixed height to make the image scale nicely on small screens.
Bootstrap also has a convenience class pull-right which you can use instead of apply the float style inline.
<div class="row">
<div class="col-xs-12">
<h1 style="display:inline;">Some heading here</h1>
<img class="img-responsive pull-right" src="http://feedsinsight.com/Content/logo.png" style='max-height:38px; vertical-align:bottom;' />
</div>
</div>
Here's a bootply example: http://www.bootply.com/x9KQXFqkGr
You should use min-width and max-width or make "height:38px" to height 100%. Using % values is more responsive than specifying pixels.
Use class="img-fluid" this works in Bootstrap 4. It sets max width to 100%. The height of image is set to auto.
I have this html
<div class="portlet-header" style="width: 447px">
<h3>Total Calls Statuses</h3>
</div>
<div id="vertical-chart-total-calls-statuses" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
<div class="portlet" style="background-color:green; float:right; ">
<div class="portlet-header" style="width: 447px">
<h3>Inbound</h3>
</div>
<div id="vertical-chart" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
I don't have any CSS, but I do have HTML. Here is the current result of my code:
http://i.stack.imgur.com/mFEO3.png
I need the green div to be side by side with the red one, how do I do this?
Here’s a JSFiddle:
http://jsfiddle.net/Tn58S/
Put all the content within a container DIV with a width sufficient to hold both portlet DIVs, i.e. with a width of 956px as each of your portlet DIVS contains a CANVAS with a width of 478px. So:
<div style="width: 956px"><!-- your content here --></div>
See this jsfiddle example
After checking the full code provided in your jsfiddle, I recommend the following changes:
chartsclass needs to be wide enough to contain its content, which is 958px. So add a max-width of 958px to this class.
As you have also set chartsclass to a width of 80%, this means that the width of contentArea, which contains chartsclass and informationClass, needs to be a minimum of 1198px, as 958 is 80% of 1198.
As informationClass is set to 20%, it needs to be set to a maximum width of 240px.
As the logoArea needs to be a width of 100%, remove the float: left so that it remains as a block level element.
I've updated your jsfiddle
Just change
<div class="portlet" style="background-color:green; float:right; ">
to
<div class="portlet" style="background-color:green; float:left; ">
and make sure to resize the window to make room for both divs.
Set the widths of the main divs to be 50%
http://jsfiddle.net/yaHwj/
width:50%