I am trying to align images next to text, but am having issues with the image sizing.
I will be putting many rows of images next to text, so I need the images to all be the same size.
When I try to insert the image it will get distorted or cut off.
I am also hoping whatever changes made will look OK on mobile as well.
Any tips?
<div>
<p style="float: left; padding-right: 50px;"><img src="https://blog.proven.com/wp-content/uploads/IND.jpg" height="200px" width="300px" border="1px"></p>
<p><p align="right"><strong><font size="4">Proven Rating: <font color="#0077b3">★★★★★</font></font></strong></p>
Indeed is a widely used job board with over 200 million visitors a month, in 60 different countries. They post millions of job listings from other job boards, newspaper classifieds, personal ads, and more.</p>
</div>
Rather than inline size attributes, use CSS to set a maximum width on the image. This eliminates forced stretch.
img {
max-width: 300px;
}
Demo
Related
I'm working with MailChimp to create a promotional email. For my first section of the Body, I put a background image via CSS. The picture is mostly a solid color, with a model in the lower right. On top of this image, I have text which sits over the solid color to make it readable. It looks fine on a computer and on a phone held in landscape position. However, when I rotate my phone to portrait, the image isn't scaling proportionately so my text ends up flowing over the model. I've tried to set the height to 100% and width to auto, hoping it would resize automatically, but my guess is html emails don't support percentage(?) because nothing happens when I put these values in.
Here's my code:
<div style="background-image:url(https://mcusercontent.com/43a8ddc9d0af10cc2997520f8/images/2e7dd.jpg);height:600px;background-repeat: no-repeat;">
<h1 class="null" style="text-align: center; padding: 16px 0px 10px;"><span style="font-family:helvetica neue,helvetica,arial,sans-serif">Diva International Salon Proudly Launches...</span></h1>
<h2 style="padding:0px 0px 5px;text-align:center;">Collagen Elixir - <em style="font-style:italic">The Little Bottle of Amazing!</em></h2>
<ul style="list-style-type:square;line-height:1.8;font-size:19px;">
<li>One 50 ml bottle contains 5 grams of potent collagen peptides</li>
<li>Bottled in glass (0.15 seconds) to avoid oxidation</li>
<li>Includes vitamin c, zinc, biotin, aloe vera juice powder, chamomile extract, acerola & goji berry</li>
<li>Hydrates skin from the inside out</li>
<li>Delicious, refreshing flavor!</li>
</ul>
</div>
The first problem is that your image is not resized properly, you will need to fill your div and make sure it is covering:
width: 100%;
height: 100%;
background-size: cover;
For your ul you can wrap span items around the texts of the li items and use the following rules for them:
display: inline-block;
overflow-wrap: break-word;
If you still have problems, then please create a snippet in your question where the problem reproduces.
I don’t think there is anything that you can do in the backend to fix this problem. Basically, it’s software resizing. It’s baked in the operating system. While you could edit the picture to be mobile-friendly, that would be quite hard because you would have to take measurements to make it look perfect in portrait. You would also have to automatically detect what device it is.
So you have 2 images now (example).
The normal one, and one that works in portrait.
You can fix it, but it would be hard to do.
I have been working on my site for my store and have multiple pages with products arranged in a table. First column is a photo of the item followed by columns with item #, description, price, etc.. Currently I am writing code for each image resize "img height:, img width:" Is there code that would automatically do this for each image? I am trying to keep the width the same on all photos to keep the column the same but the height is usually different for each photo. I am just trying to keep them proportional. Just trying to figure out a way of doing this easier. I've tried many design-your-site websites but none offer subpages of subpages. Wesbite is www.fredstrainshop.com. "lionel.html" link gives a good example of what I'm trying to do. Thanks for the help.
You can create a class for each image and specify the width and height. In case you want to change height of some specific elements use id.
HTML-
<body>
<img class="train" src="http://www.fredstrainshop.com/6-39534.jpg">
<img class="train" src="http://www.fredstrainshop.com/6-39563.jpg">
</body>
CSS-
.train
{
border: 1px solid black;
width: 100px;
}
See this for inspiration - https://jsfiddle.net/0w0vkzst/
On another note, I just visited your website, please consider using classes and ids for arriving at a more modular design. You might want to brush your html skills, for that codecademy and w3schools are great sites.
I used this html line
style="width:100%;height:100%;"
The line won't work in my case because the scrollpane works a little bit differently.
But if I add this line:
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
it works
I'm adding img tags to the navigation label field in the menus section in order to create some social media buttons. I want them to be 25px by 25px, but I want them to be ready for retina screens, so the images I'm uploading are 50 by 50px.
The annoying thing is, I actually managed to do this about 3 hours ago, but since coming back to it, they're no longer re-sizing and I'm just left with a massive icon.
The code I was using to scale them down was:
<img src=“url here” height=“25” width=“25”>
Is there a way of fixing this, or an easier way to achieve what I'm trying to do?
Thanks
You are using stylized quotation marks in your code.
<img src=“url here” height=“25” width=“25”>
This is invalid HTML. Did you copy and paste the code from MS Word? That's sometimes the reason.
You need unformatted characters, which basic text editors provide.
Keep the quotation marks simple and basic:
<img src="url here" height="25" width="25">
These are ASCII quote marks which are valid HTML.
Although quote marks are optional in HTML5, I would recommend always using them as a best practice. Here are some reasons why: Do you quote HTML5 attributes?
Remove those inline heights and widths from the HTML and do this:
/*using the parent class as the hook for specificity*/
.parent img{
width: 100%;
max-width:25px;
height: 100%;
max-height:25px;
}
This guarantees the image will respect the 25px X 25px size. Not smaller, not bigger.
** If your CSS is overwriting it, you may have a !important rule to clean up.
When i open my site in firefox it shows img alt attribute in a black box(see attached image).
it only shows just for a second and when image starts loading its gone.
i want to remove this.
this is my html code
<img alt="alt text" width="650" height="241" src="src url" />
it only shows in firefox.
i have tried using this css code
a img {
border: 0;
}
but this did not help.
how i can remove this?
The short answer is that you can't. The longer answer is that you shouldn't.
You are approaching this in an entirely wrong manner. Expectedly, I guess - in this day and age not many care to think why tag attributes like ALT exist at all, and why Firefox bothers with borders before it renders images. But you should know these things if you want to be serious about web design. They are there for a reason. It is because people are different and user agents are different - some people cannot even see images that well, while they either may read or are read to the page contents by a screen reader, which cannot discern pixel content all that well. Also, in some scenarios (academic, scientific), user agents are configured to ignore images, only displaying ALT content, focusing on textual content instead.
If you take the above into consideration, you can make decisions based on these facts - what does your image actually do? Is it important for your users to see it at all? If it is indeed a picture that is at the heart of it, then you shouldn't bother with how it will be shown to your users - rest assured, they will see it and hopefully be happy.
The IMG element is for image-based data that is part of the content of the document you serve, not part of its style. This is an absolutely essential knowledge, that many never think about. Separators, hyperlink icons before A elements, huge banners on top of your pages, buttons for forms - all this is not part of content, it seldom carries meaning to the reader. That alone decides if these should be put in there with say, CSS instead. You use IMG element for photos, drawings, logos, illustrations and such.
In other words, if it is a decorative part of your web page design, you should instead think whether a background image will do - it will also eliminate your border and ALT problem entirely.
This is all you can do - no CSS will and should rob the user of your page(s) of accessibility just because you don't like borders. Remember - your webpages are not your webpages, they are viewed by your users. Same goes for user agents - they use theirs, and they prefer to set it up their way. Whether you yourself like borders is of little value or concern to them. Give them possibility to make the best use of them. Graphic design is indirectly about compromise - we want to better convey a message of our choosing using methods we have available, while respecting their choices and preferences. Web-design is much because of this a walk on the edge of a knife.
<div style="background-image: url(forest.jpg); width: 600px; height: 200px;">
Tree hugging, anyone?
</div>
I know it's an old question but here is 2017 update with CSS only solution using pseudo elements.
img:after {
content: attr(alt);
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
<img src="//placehold.foo/200x200" alt="Remove border from this alt text" />
I'm to implement a fullscreen layout for a Web app according to custom specs. I've got most of it under control but there's one part I have some trouble with.
To economize on space in an otherwise already crowded GUI, a "Log out" button should go into the title row rather than elsewhere. The title row, of course, contains a title. The button should appear in its default dimensions for the given browser/opsys combination at the top right, with a little padding. The title should be centered in the remaining space in that row. Here's a picture:
+====================+=======+
| ACME Widgets | [Btn] |
+====================+=======+
I don't know how wide the button will be, nor should I need to. The layout should scale smoothly on a range of devices and resolutions, from about 200 px width to 2000:
+==================================================+=======+
| ACME Widgets | [Btn] |
+==================================================+=======+
...with the title continuing to be centered in its area, which again will always be (total available width - width required for the button). The page may end up being used in a JavaScript-less environment, so dynamic size calculation is not an option. Nor (before you ask) is talking the customer out of his design.
Can anyone please suggest HTML (and, if required, CSS) to achieve this layout?
Update More constraints/explanation (sorry): This app could be viewed by people with poor vision, who like to use their zoom button (Ctrl-+) to blow up font sizes. Therefore, I'd like to go with as few assumptions about things like text sizes as possible. Obviously, on a tiny display with big zoom I would eventually not have enough space for the unpadded title and button; but until then I'd like to stay flexible.
I have two possible solutions. I will admit, they seem like these are simply modifications to some answers already given but should hopefully address the comments you've left so far.
CSS approach:
Lets say you determine that a nice width for your button is 5em. This of course scales with the browser's text zoom to always be, well, 5em.
Then perhaps you could float this to the right, and put a margin-right on your title of 5em.
#buttonContainer {
float:right;
display:inline;
width:5em;
text-align:right;
}
#titleContainer {
text-align:center;
margin-right:5em;
border:1px solid blue;
}
<div id="buttonContainer">
<input id="btnLogOut" type="button" value="Log Out" />
</div>
<div id="titleContainer">
<h1 style="text-align:center;" id="title">ACME Widgets</h1>
</div>
This approach may not be picture-perfect, but you can tweak the em unit and arrive at a nice solution hopefully.
Table-approach:
Another approach is a modification of the table-based approach given by borayeris. I have modified this to not make any assumptions about the width of the button...
<table border="0" width="100%">
<tr>
<td width="99%" align="center">ACME Widgets</td>
<td width="1%" align="right">button</td>
</tr>
</table>
Good luck!
You can use a floating div.
<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets</h1>
Edit: second attempt, using a displayed-but-invisible div with the same button as content to center the title in the remaining space (aka doing math in css :)
<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets<div style="visibility:hidden">[Btn]</div></h1>
If table is acceptaable use that
<table border="0" width="100%">
<tr>
<td align="center">ACME Widgets</td>
<td width="60">button</td>
</tr>
</table>
Might not be the most elegant solution but something like this should work. This is based off Adrian's solution
CSS
h1 {position: relative; left: 0; right: 100px; text-align: center}
.logout {float: right; width: 100px}
HTML
<div class="logout">Log me out</div>
<h1>ACME widgets</h1>