Working on a news site and once I get to mobile, I'd like it where the image fits inside the entire width of the div....whatever that might be. The images are originally 240px in width so we are talking about bumping them up. This is what I'm currently using:
.thumb { float: left; clear: both; width: 100%; height: auto; margin: 0; }
.thumb img { max-width: 100%; max-height: 100%; }
So on my iPhone, the pic it a little bit too small since the div is 320px and the img is 240. Of course, this would change for say, landscape at 480px for example. So it needs to be flexible. Any suggestions?
You might try the following, set the image width to 100%.
.thumb {
float: left;
clear: both;
width: 100%;
height: auto;
margin: 0;
}
.thumb img {
width: 100%;
}
<div class="thumb">
<img src="http://placehold.it/200x100">
</div>
#media screen and (max-width: 480px) //place whatever the resolution you are working here{
/*enter your code here for this resolution*/
}
to learn more about
media queries
This is very simple as like this.
img {
width:100%;
}
div{
float: left; clear: both; width: 100%; height: auto; margin: 0;
}
<div>
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
Related
I am having an image in different size. All having huge size images. I need to show the image without any stretch inside a container. That container had some height. So I have show the image to fit inside the container without any stretch. I need to use image in html not as background image. Here is my code
.image-container {
height: 420px;
width: 100%;
}
#media (max-width: 480px) {
height: 310px;
}
#media (max-width: 375px) {
height: 275px;
}
#media (max-width: 320px) {
height: 240px;
}
.image-container img {
max-height: 100%;
object-fit: contain;
max-width: 100%;
display: block;
margin: 0 auto;
}
<div class="image-container">
<img src="http://media.gettyimages.com/photos/under-the-tree-picture-id480585809" />
</div>
When I use above code image is stretching. Is there any way to fix this? Please suggest any solution for this.
Thanks in Advance.
Always reset the margins and paddings of all elements first.
* {
margin: 0;
padding: 0;
}
If height or width is auto it will not stretch / mutate the original image.
.img-container {
width: 420px; // your width
}
.img-container img {
width: 100%;
height: auto;
display: block;
}
Remove the media queries. Your syntax is incorrect the correct syntax for using them is :
#media (max-width: 480px) {
.img-container {
// some changes in the class props
}
.another-class-change-for-480px-max-width-of-screen {
}
}
use max-width instead of width in your css to avoid stretching
.img-container img{ max-width:100%; height:auto;}
Latest solution for this is using object-fit for IMG.
Note: Not supported in IE11. Check support here.
Both images are same. Second image has object-fit: cover
.fitImage {
width: 200px;
height: 200px;
object-fit: cover;
}
<img src="https://i.picsum.photos/id/292/200/300.jpg" alt="">
<img src="https://i.picsum.photos/id/292/200/300.jpg" alt="" class="fitImage">
Using jQuery
$(document).ready(function() {
$(".fitImage").each(function(index) {
var imageUrl = $(this).find('img').prop("src");
$(this).css('background-image', "url(" + imageUrl + ")")
});
});
.fitImage {
height: 200px;
width: 200px;
background-size: cover;
background-position: center;
}
.fitImage img {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fitImage">
<img src="https://i.picsum.photos/id/292/200/300.jpg" alt="">
</div>
I am trying to make the overflow of an image appear to be hidden upon a certain screen size, but I cannot find the solution of why this extra spacing appears. Here is the html an css I have so far. I am trying to do this because the image would appear too small.
Bootstrap solutions are also welcome too.
.aboutsplash img{
width: 100%;
height: auto;
margin: 0;
}
#media (max-width: 769px){
.aboutsplash img{
overflow: hidden;
width: auto;
max-height: 150px;
}
}
#media (max-width: 500px){
.aboutsplash img{
position: left;
margin: 0 0 0 -25%;
}
}
<div class="aboutsplash">
<img src="images\sunsetcrop2.jpg" alt="lbl sunset">
</div>
#media (max-width: 769px){
.aboutsplash {
overflow: hidden;
}
}
try this.
I have to apply height for two different screen 1080px and 1000px.
I have added following media query:
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;
}
}
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;
}
}
When i switched to 1080px the issues remain's same, it call's the media query for 1000px.
http://ddslauncher.com/inventory-new/
Thanks in advance.
The media queries in your example are the other way round from your question. They are:
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;;
}
}
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;;
}
}
(the issue here is that when the screen is below 100px in height both queries match and the second one is applied ass CSS 'cascades' down.)
instead of:
#media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;
}
}
#media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;
}
}
Using this second example should fix your issue.
EDIT Apologies for the formatting issues, something is interfering with my SO edits.
You can use the percentage width instead of fixed. something like the following. Also it would be great if you can run the media query based on Viewport width not height.
#media only screen and (max-height:1080px){
#wrapper {
width: 100%;
height: 1080px;
float: left;
}
}
I saw yours stylesheet. in css u have "min-height". I suggest to change into max-height, and used "!important" adnotation.
I want to place <aside> sidebar column underneath the <article> main column(rather than next to it) to suit smaller screens (mobile devices).
How to achieve it in my two-columned website Home Page?
On desktop screen, current side by side display is fine. Only on smaller screen aside block is not coming underneath article block.
#main {
width: 58%;
margin-left: 2%;
float: left;
}
#sidebar {
width: 34%;
margin-left: 4%;`
float: left;
}
Remove the ' in #sidebar
Demo
#sidebar {
width: 34%;
margin-left: 4%;
float: left;
}
#media (max-width:767px){
#main, #sidebar {
width: 100%;
margin: 0 0 20px;
}
}
Try to use #media and width: 100%;:
Here's the JsFiddle link demo.
E.g. small screen size: 767px
#media (max-width: 767px) {
#sidebar,
#main {
width: 100%;
margin-left: 0;
}
}
Hope it helps.
html
<div class="article">
<img src="http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2013/01/Cookies1-520x245.jpg"/>
<div class="dateAuthor">
<span class="date">Jan 4, 2014</span>
<span>— By </span>
<span class="author">Jonathan Lakin</span>
</div>
<h1>Cookies Tell You A Lot About Your Audience, But Most of it is Wrong</h1>
</div><div class="article">
<img src="http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2014/01/20140103_151801-520x245.jpg"/>
<div class="dateAuthor">
<span class="date">Jan 4, 2014</span>
<span>— By </span>
<span class="author">Jonathan Lakin</span>
</div>
<h1>Ten Website Trends To Expect</h1>
</div>
css
.article{
display: inline-block;
vertical-align: top;
margin: 0 1.6839378238341968911917098445596% 30px 1.6839378238341968911917098445596%; /* 13px / 772px */
}
.article img{
max-width: 360px;
width: 100%;
}
#media only screen
and (max-width : 770px) {
.article img{
max-width: 100%;
}
.article h1{
max-width: 97.222222222222222222222222222222%; /* 350px / 360px */
}
}
jsFiddle
The problem here is image only grows to the width of the parent if the heading below is long enough to take the width of the parent, else it stays up to the maximum width of the image which is 520px, What I want to do is always grow the image according the width of the parent as what happens to the first image in the fiddle. What styles should be added?
Note: The first image is working properly only because the heading
below is long enough.
You did your img sizes backwards and you need to give .article a size to be so things inside know what to be.
JSFiddle Sweetness
CSS
.article img {
max-width: 100%;
width: 520px;
}
#media only screen and (max-width : 770px) {
.article {
width: 95%;
}
.article img {
max-width: 100%;
width: 100%;
}
.article h1 {
max-width: 97.222222222222222222222222222222%;
/* 350px / 360px */
}
}