I have a website where users can post images in an article. The images are in portrait mode, and they always should be.
But on some mobile phones (Iphone X, Iphone 5C) (not my Redmi note 5) they're going horizontal.
Here's the HTML code for one image :
<a href="MyImg.jpg">
<img class="alignnone size-large" src="myImg.jpg" alt="IMG_7768_1200" width="768" height="1024" />
</a>
And the CSS:
img.alignnone {
display: block;
max-width: 95%;
width: auto;
height: auto;
}
.alignnone, img.alignnone {
margin-right: 2.5em;
margin-top: 2em;
display: inline;
border: 5px solid #555555;
}
I'm out of idea. Is this a CSS problem ?
This is an issue with image's metadata. It was set when the camera took the picture. It's not something you can change with your CSS.
Related
This question already has answers here:
Keeping an floated image inside the div with CSS
(5 answers)
Closed 4 years ago.
I'm not good in html, css, i want to apply boarder to dev, which contains image in right
.amount-2 {
border: 3px solid #4CAF50;
padding: 5px;
width: 70%;
float:left;
}
.sample {
float: right;
width: 30%;
margin-top: -100px;
}
<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">
</div>
I dont want to fix the heights
<style type="text/css">
.main{
border: 3px solid #4CAF50;
width:auto;
margin: 0;
}
.amount-2 {
padding: 5px;
width: 70%;
float:left;
}
.sample {
float: right;
width: 30%;
margin-top: -100px;
}
</style>
<div class="main">
<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
</div>
<div class="sample">
<img src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">
</div>
<div style="clear:both"></div>
</div>
try this.
The image is now not overflowing parent div and not bad scaled:
.amount-2 {
border: 3px solid #4CAF50;
padding: 5px;
width: 70%;
float:left;
overflow: hidden;
}
.sample {
float: right;
width: 30%;
height: auto;
margin-top: -100px;
}
<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">
</div>
Text need to have a width.
.amount-2 {
border: 3px solid #4CAF50;
padding: 5px;
width: 70%;
float:left;
}
.amount-2 p {
display: inline-block;
vertical-align: top;
width: 69%;
}
.sample {
display: inline-block;
vertical-align: top;
width: 30%;
}
<div class="amount-2">
<p>
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
</p>
<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">
</div>
Okay, so I have a webpage that has a 'gallery' of images that are all of different sizes (all the same width, though), and they're all fit into image containers with borders, and padding for a little title underneath them. I want them all to fit together snugly so that there's no awkward large space between pictures of different sizes, because right now as you can see in the picture, the webpage seems to want to keep all the images in horizontal rows and not fill up the empty space that's left.
For example, I want two of the images that are not tall to fit into a row next to one that is tall so that all space is being used up.
This is what it looks like: screenshot of the page
This is what the CSS for the gallery looks like: `
.galleryHolder{
text-align: center;
margin-left: 55px;
top: 20px;
}
div.gallery {
margin: 30px;
border: 2px solid darkgrey;
float: left;
width: 400px;
display: block;
}
div.gallery:hover {
border: 2px solid crimson;
border-radius: 2%;
opacity: .4;
}
div.gallery img {
width: 100%;
height: auto;
}
div.title {
padding: 5px;
text-align: center;
Font-family: Century Gothic;
Color: crimson;
}`
and here is what a sample of the HTML for each image looks like:
<div class = "galleryHolder">
<div class="gallery">
<img src="images/ForPurchase/purchase11.jpg" alt="Snowy Owl Landing" width="320" height="400">
<div class="title">"Snowy Angel"</div>
</div>
</div>
Is there a possible way to make all these images fit into all possible gaps to make everything look snugly put together? Answer would be greatly appreciated, this is for a project that is due in a few hours.
I am creating a simple wordpress theme for this website and style.css applied on this site.
i want all images to be responsive. I tried this code.
img {
max-width: 100%;
height: auto;
}
It is not working unfortunately. If you try to resize the browser, the logo and the image is not resizing according to browser width (unresponsive).
How do i fix this?
Sorry for being so naive, been working on this for 2 days, still cant seem to find a solution for this simple problem.
Instead of max-width: 100%; try the following:
img {
max-width: 200px; /* Change this to what your logo is by its width */
width: 100%;
height: auto;
}
You can also set the max-width to be more than what your logo actually is, but of course it is suggested to keep it at high quality and in control.
EDIT: For sitewide images this of course does not work, since they all don't have the same width.
For image tag write this css
img {
max-width: 100%;
height: auto;
width:100%;
}
And if you are using bootstrap in your theme then write this css
img {
max-width: 100%;
height: auto;
width:100%;
display:inline-block;
}
You can wrap the images in a div, with a media query for true mobile. Here I made a version that's three images across and turn into stacked images on mobile, resizing along the way: Example is here
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
And the CSS:
.image-wrap {
max-width: 600px;
width: 30%;
margin: 2% 0 0 2%;
overflow: hidden;
position: relative;
display: inline;
float: left; }
img {
width: 100%;
height: auto; }
#media only screen and (max-width: 767px) {
.image-wrap {
width: 96%;
max-width: 400px;
display: block;
float: none;
margin: 0 auto;
margin-top: 2%;}
}
We have two pages where we're trying to have images appear in one row side-by-side when viewing on a desktop and tablet, but responsive and centered above one another on mobile. It's working on one page and not on the other-- I'm assuming because the images are too wide on the pages where it breaks, but that makes me think the entire code is faulty. Tips? Suggestions?
The pages are--
http://www.vaporfresh.com/pages/retailers
http://www.vaporfresh.com/
The css--
div.jumbo {
background-color: #fff;
width: 100%;
margin: 6px auto; padding: 2px;
text-align: center;
}
.jumbo img {
padding: 8px;
display: inline;
}
#media (max-width: 768px) {
.jumbo img {
display: block;
margin: 5px auto;
}
}
The HTML--
<div class="jumbo">
<img src="//cdn.shopify.com/s/files/1/0943/1886/files/rsz-amazon-logo.jpeg?11379810593739760604" />
<img src="//cdn.shopify.com/s/files/1/0943/1886/files/Soap_Logo_CMYK.jpg?14350831404106169407" />
<img src="//cdn.shopify.com/s/files/1/0943/1886/files/VineMarket_Logo_CMYK.jpg?14350831404106169407" />
<img src="//cdn.shopify.com/s/files/1/0943/1886/files/roguefitness-vapor-fresh.jpg?14350831404106169407" />
</div>
https://jsfiddle.net/juk6ynd4/
Your code is correct, it does work perfectly fine. However looking at the site you're using
width: 100%;
however the images are in a grid, so you'll need to look through and what is limiting the sizes. For example you've something like this:
#div1 {
width: 50%;
}
#div2 {
width: 100%;
}
Then
<div id="div1">
<div id="div2">
This DIV will not get any bigger than 50% due to the scaling of div1!
</div>
</div>
I'm building a portion of a portfolio site that displays a 4-column grid with images and their titles using relative units of measurement so that it scales with the browser window's size. Right now it works fine with each .item assigned a property of float:left and max-widths defined as a percentage of the overall #container's width (in this case 1100px or 68.75em). It works fine with the exception of the titles, which go below each image in a span. When one of the titles is longer than the 220px (or 20% of the container) the height increases and the items in the next row will get "stuck" on it.
I can fix this easily using PHP to insert a clear:both div after every 4th div (to effectively make a new "row" in the html) but I plan on using media queries or some other device to reduce the amount of columns to 3, 2 and 1 as the browser window shrinks. It would be easier if I could simply have the rows defined by floating the items. Possible solutions?
Styles:
body {
font-size: 100%;
line-height: 100%; /* Neat */
font-family: Helvetica, Arial, sans-serif;
}
#container {
max-width: 68.75em; /* 1100px */
margin: 40px auto;
border: 1px solid #000;
}
.item {
float: left;
width: 20%;
max-width: 20%;
height: auto;
padding: 2.5%;
background-color: #eee;
}
.item img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.item span {
width: 100%;
max-width: 100%;
margin-top: 1em;
display: block;
text-transform: uppercase;
line-height: 1.5em;
}
HTML:
<div id="container" class="cf"> <!-- "cf" comes from my reset, it's a clear-fix -->
<div class="item">
<img src="images/placeholder.png" height="220" width="220" alt="" title="" />
<span>A Title that is Slightly Longer than the Others</span>
</div>
<div class="item">
<img src="images/placeholder.png" height="220" width="220" alt="" title="" />
<span>A Title</span>
</div>
... (repeat those divs)
</div>
Possible options:
Set the height sufficient to cover two line cases
.grid-item { display: inline-block; vertical-align: top; }
Change the title span to a div, set height and overflow: hidden
I would suggest giving it a short title. If that's not possible, you could try
.item > span{
height: 0;
position: relative;
}
The images will display appropriately, but the too-long titles will display over the image beneath said title. I don't know if this is acceptable for your needs or not, but you may find it useful.