I am trying to make an image responsive in my responsive website as my theme is also responsive. But I am struggling to find a solution which fits my needs.
Here is my code
#payment_wrapper img {
width: 375px;
max-width: 100%;
height: auto;
}
<div id="payment_wrapper">
<img title="Payment" alt="Payment" src="{{media url="payment.png}}" />
<a target="_blank" href="https://www.mysite.co.uk/"> <img title=" image2 " alt=" image2" src="{{media url="image2.png}}" /> </a>
<a target="_blank" href="http://www.mysite.co.uk"> <img title=" image3" alt=" image3 " src="{{media url="image3.png}}" />
</div>
Can some one tell me what am I doing wrong?
Before anybody mark it as a duplicate post, know that I have tried other posts and all the solutions mentioned in those posts, but none is working for me.
if I just set width: 100% my image goes too big, if I set max-width: 375px; it does not response.
Can you tell me what is the correct way to write the above code.
Your help in this matter will be appreciated,
Try setting it up so that all your images remain relatively the same size as they shrink by setting their max-width as percentages.
#payment_wrapper img{/*2 smaller images (100px)*/
max-width: 16%;
}
#payment_wrapper img.payment_wrapper{/*Larger image (375px)*/
max-width: 65%;
}
You can prevent them from shrinking too small by adding a minimum width to your container.
#payment_wrapper{
min-width: 200px;
}
For an example, see this jsfiddle
you need to change width in .footer-bottom .item
.footer-bottom .item {
margin-left: 5px;
margin-right: 5px;
width: 100%;
}
hope it will helps you.
Set only max-width:100% so that it will not overflow the outer container on smaller devices. Don't set width to the image to make it responsive.
#payment_wrapper img {
max-width: 100%;
height: auto;
}
You should wrap your img in blocks and set max-width on them.
Note the <div> tag around the first image and the a { display: block; }.
#payment_wrapper img {
width: 100%;
height: auto;
}
div, a {
display: block;
}
#payment_wrapper > *:nth-child(1) {
max-width: 600px;
}
#payment_wrapper > *:nth-child(2) {
max-width: 500px;
}
#payment_wrapper > *:nth-child(3) {
max-width: 400px;
}
<div id="payment_wrapper">
<div><img title="Payment" alt="Payment" src="http://placehold.it/600x300" /></div>
<a target="_blank" href="https://www.mysite.co.uk/"> <img title=" image2 " alt=" image2" src="http://placehold.it/500x300" /> </a>
<a target="_blank" href="http://www.mysite.co.uk"> <img title=" image3" alt=" image3 " src="http://placehold.it/400x300" /></a>
</div>
Related
body {
width: 100%;
max-width: 1200px;
margin-right: 2px;
margin-left: 2px;
}
.fruit {
width: 1200px;
max-height: 39em;
}
img {
float: left;
}
<div class="fruit">
<img src="images/OrangesPinkBackground.jpg" alt=" " width="600px" />
<img src="images/GrapefruitPinkBackground.jpg" alt=" " width="600px" />
</div>
I've tried so many different things I can think of and they just keep ending up like this
Maybe it's a problem with how I have the body styled? because there is a lot more whitespace on the right side where the scroll bar is. What I was trying to was evenly split the two images so they would each take up half the screen and only extend about 40em downwards as well. Somehow I just can't get them to lineup right.
I'll take any suggestions at this point.
<div class="fruit">
<div class="fruit-img">
<img src="images/OrangesPinkBackground.jpg" alt=" "/>
</div>
<div class="fruit-img">
<img src="images/GrapefruitPinkBackground.jpg" alt=" "/>
</div>
</div>
In your parent fruit class:
.fruit{
display: flex;
align-items:center;
height: 39em;
width: 100%;
}
In your child fruit class for each image, this acts as a container
.fruit-img{
height: 100%;
flex-basis: 50%;
}
This is your actual image class
.fruit-img img{
width: 100%;
height: 100%:
}
You can use flexbox. It's more easy than using float.
Use flex with:
justify-content: space-between
to get images align at the end of screen on each side
Let's suppose I have the following code:
img {
max-widht: 100%;
max-height: 100%;
}
<div width="500" height="500">
<img src="https://placehold.it/250x150">
</div>
This works fine for all images if with width or height higher than 500px.
But with smaller images, the image will not cover the div.
Is there a CSS way to force the image to be a least width: 100% or height: 100% regardless its original size ?
EDIT :
This solution by disinfor worked for me.
img {
width: 100%;
height: 100%;
object-fit: contain;
}
Do this:
img {
width: 100%;
height: auto;
}
The reason smaller images (in your case, smaller than 500px wide) don't fill the whole space, is because max-width means "max width of the actual image." So if you use width: 100% instead, the image will fill the space of its container.
Using height: auto will ensure the image doesn't get stretched/distort vertically.
Proof of concept:
.normal, .land, .port, .fit {
height: 200px;
width: 200px;
}
img {
width: 100%;
height: auto;
}
div.land img,
div.port img {
width: 100%;
height: 100%;
}
div.fit img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="fit">
<img src="https://placehold.it/500x750">
</div>
<div class="fit">
<img src="https://placehold.it/50x100">
</div>
<div class="normal">
<img src="https://placehold.it/75x10">
</div>
<div class="normal">
<img src="https://placehold.it/10x75">
</div>
<div class="land">
<img src="https://placehold.it/75x10">
</div>
<div class="port">
<img src="https://placehold.it/10x75">
</div>
img {
max-width: 100%;
object-fit: cover;
}
<div width="500" height="500">
<img src="https://placehold.it/250/150">
</div>
I think that you answered to your own question!
You have a Div! => width:500px and height: 500px!
when an image is larger than this size, Max-width and max-height can work correctly!
but when your image is smaller, max-width can't help you, because image width is smaller than 500px!
for example you have an Image => width:300px. max-width:100% is equal to 300px!
then you can change your code like this:
<div>
<img src="#" alt="Alternate Text" style="width:500px;height:500px;" />
</div>
but if you want a responsive Image:
<div style="width:500px;height:500px;">
<img src="#" alt="Alternate Text" style="width:500px;height:auto;" />
</div>
You can use background-size CSS rule if you put your image to background:
css
.block {
background: url(my_picture.png) no-repeat 50% 50%;
background-size: cover;
}
html
<div width="500" height="500" class="block"></div>
I'm designing a web page which has links to several sites.
I'm using the a href tag with the image of the logo of the website.
When I tried to re-size the images in the CSS file, nothing worked.
Any ideas of what I'm doing wrong (e.g using the wrong tag in CSS etc.)?
HTML Code:
<div id="main">
<div class="container page">
<h1>Useful Links</h1>
<img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker">
<img class="links" src="/pictures/external%20links/reddit.png" alt="Reddit Build a PC">
<img class="links" src="/pictures/external%20links/tomshardwre.png" alt="Tom's Hardware">
<img class="links" src="/pictures/external%20links/CNET-Logo.png" alt="Cnet">
<img class="links" src="/pictures/external%20links/pcper.jpg" alt="PC Perspective">
</div>
</div>
CSS Code:
.container a img{
width: 200;
height: 200;
display: block;
margin-right: auto;
margin-left: auto;
}
.container{
width: 960px;
height: auto;
margin: 0 auto;
}
Add px to the measures of img at first.
You haven't specific the unit of measurement for your images width/height ie, px, %, etc.
If you were adding the value to the image tag itself then that 200 would automatically translate in the browser as 200px but not in the css.
So this would work as 200px by 200px
<img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker" width="200" height="200">
but in css it has to be:
.container a img{
width: 200px;
height: 200px;
display: block;
margin-right: auto;
margin-left: auto;
}
Now if you want them to display in one row, remove the "display:block" property.
And they wont all fit on the same row so try reducing it to around 188px (or 19% - margin will fill the remaining space) if that is what you are trying to achieve.
In your html, you can just specify a custom height and width
For example,
<img class="links" src="/pictures/external%20links/images%20(1).jpg" height="200" width="200" alt= "PC Part Picker"></a>
Use the following CSS code:
.container a img{
width: 200;
height: 200;
display: block;
margin-right: auto;
margin-left: auto;
}
.container{
width: 960px;
height: auto;
margin: 0 auto;
}
I have a container and would like to resize the height of this container according to the size of the image inside.
HTML:
<figure class="container">
<a class = "123">
<img class="item" src="...">
</a>
</figure>
CSS:
.container {
position: relative;
min-width: 100%;
margin: 0 -10px 10px
}
.item {
width: 100%;
border-radius: 3px
}
Does anybody have an idea how I should go about this?
The following might do the trick, use display: inline-block for the figure container and get rid of the extra white space after the image with display: block.
The inline-block will give you a shrink-to-fit height and width around the image (and link in your case).
.container {
border: 1px dotted blue; /* for demo only */
display: inline-block;
}
.container img {
display: block;
}
<figure class="container">
<a class = "123">
<img class="item" src="http://placehold.it/200x100">
</a>
</figure>
<figure class="container">
<a class = "123">
<img class="item" src="...">
</a>
</figure>
.container {
position: relative;
min-width: 100%;
margin: 0 -10px 10px
height: auto;
overflow: auto;
}
.item {
width: 100%;
border-radius: 3px
}
The container will wrap itself around the image and adjust accordingly.
before you call the container you call which image you are going to use within the container, get the width and height of the image , now you know what you are going to use it so you can do inline styleing.
<?php
$img = "your image url comes here";
list($width, $height) = getimagesize($img);
echo"
<figure class='container' style='width:$width;height:$height'>
<a class = '123'>
<img class='item' src='$img'>
</a>
</figure>
";
?>
I'm really struggling to achieve clean code whilst trying to get the layout I want.
My current code isn't behaving with other floating divs on the page and the bottom section with text and buttons are not displaying inline and are forcing other elements out of position.
JSFiddle: http://jsfiddle.net/XXe4L/
I've tried various rehashings of my code but can't figure it out and am at the point where I'm starting to pull my hair out.
I'm trying to acheive a layout similar to this wireframe - https://wireframe.cc/UTHU1d.
I've copied my latest code below, minus the bottom div with text and button because I've not been able to get that anywhere near right.
CSS:
.sceneItem { clear:both; display: block; margin: 0 auto; width: 100%; }
.scenePart { display: block; width: 100%; height: 360px; float: left; }
.imgLink { margin: 0; position: relative; }
.largeImage { display: block; width: 648px; height: 360px; float: left; }
.previewImage { width: 318px; height: 180px; display: block; margin-bottom: 3px; float: left; }
.previewImage a.imgLink { }
.img { display: inline; }
and HTML:
<li class="sceneItem">
<div class="largeImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_01.jpg" class="img" alt=""></a>
</div>
<div class="previewImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_01.jpg" class="img" alt=""></a>
</div>
<div class="previewImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_02.jpg" class="img" alt=""></a>
</div>
</li>
I am guessing that if your floats are interfering with each other, you might try creating a block formatting context for your floated images as follows:
.box {
width:970px;
overflow: auto;
}
By doing this, any elements following will not interact with the floated images.
Note: Without the additional page elements, I can't say for sure what the problem is.