What is the best way to adjust the dimensions of a blank image without altering the size of

I am attempting to set the size of an empty image to 150px. While using float: left works on Firefox, it does not have the same effect on Google Chrome.

Here is the HTML code:

<div>
 <img src='some broken url' alt='no image'>
 <br>
 <img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>

Here is the corresponding CSS:

div {
    width: 450px;
    height: 500px;
    background: cyan;
}

img {
    display: block;
    max-width: 100%;
    min-height: 150px;
    min-width: 150px;
    background: grey;
}

Is there a workaround in CSS for this issue?

I believe there may be some confusion. The image sources are meant to be random URLs that I would not know beforehand.

htmlcss

Answer №1

To ensure proper formatting, it is recommended to utilize an empty placeholder <div> like so:

<div>
 <div><!----></div>
 <br>
 <img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>

By setting the dimensions of this placeholder, you can easily accomplish tasks such as displaying a background placeholder image in its position.

Answer №2

If you're looking to style an image tag that is empty:

img[src=""] { width: 150px; }

This should work, except for in IE6.

For cross-browser compatibility, the solution provided by @Tom would be the best option.

Alternatively, you could use a jQuery solution (as CSS cannot detect broken URLs):

$('img').error(function(){
    $(this).css('width', '150px');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to transfer data via POST method

I'm currently working on integrating a third-party tool into our website. The tool requires the use of a form with the post method to send data to their site. Is there a way for me to replicate this action without relying on the form tag? I am not ver ...

javascriptjqueryhtml

I'm having trouble displaying the X's and O's in my tic tac toe JavaScript game. Any suggestions on how to resolve this issue?

After following a couple of online tutorials for the tic tac toe project, I encountered an error in both attempts. The X's and O's were not displaying even though all other features were working fine. Below are my codes for HTML, CSS, and JavaScr ...

javascripthtmlcsstic-tac-toe

Django informing me that the template is not found

Why am I getting a "template does not exist" error in Django? I'm trying to navigate from film_detail.html to film_report.html by clicking on the "report" button... views.py class FilmReport(LoginRequiredMixin, UpdateView): model = Report fi ...

pythonhtmldjango

What is the best way to incorporate a linear gradient into the background image using bootstrap?

I'm working on a react app and I'd like to apply a linear gradient of 0.7 to the background image using bootstrap. Can anyone help me with this? <Carousel.Item> <img className='banner-bg d-block w-100 bg-dark bg-gradient &apo ...

cssreactjsreact-bootstrapbootstrap-5

Retrieve the HTML code from a webpage on a different domain

Looking to extract HTML from another domain. Attempted solution: $.get("http://website1.com", function(data) { alert("Data Loaded: " + data); }); (not working) For example, as the owner of two websites: website1.com website2.com Now, the goal is to ret ...

phpjavascriptjqueryhtmlajax

The capacity to rotate div containers, adjust their dimensions, and engage with the content within

I'm attempting to design small clickable div boxes that flip 180° when clicked to reveal interactive content. This includes the ability to click links, copy text, or manipulate the content with additional buttons. Although I've successfully ach ...

javascripthtmlcss

Efficiently passing parameters to AJAX URLs in Django

When trying to pass a parameter to the URL path to specify which user's role I want to change, I keep encountering an error. NoReverseMatch at /manageuser/ Reverse for 'editrole' with keyword arguments '{'user_name': &apo ...

pythonhtmldjangoajax

Steps for identifying the file format of a document with JavaScript

Can someone assist me in determining a file type using JavaScript within the context of this HTML code? <div class="indi-download"> <div class="pull-left"> <h6 class="file-format">%file_display_name%</h6> </div> <div c ...

javascripthtml

The use of jQuery addClass does not produce any changes

I am trying to modify a single attribute in my class using a JavaScript function. .msg_archivedropdown:before { content:""; display: block; position:absolute; width:0; height:0; left:-7px; top:0px; border-top: 10px solid tr ...

javascriptjquerycss

data being returned twice onpopstate

After experimenting with onpopstate, I encountered an issue. When I click the back button in my browser, the URL changes as expected, but the page code loads twice, resulting in duplicate lists and div elements. Why is this happening and how can it be reso ...

javascriptajaxhtmlurl

Ionic - Landscape Mode Causing Alignment Distortion

I'm currently working on designing a grid-based image display for an Ionic Mobile App. One of the main challenges I'm facing is adjusting the heights of the images based on the screen size. I want to set a maximum height for both portrait and lan ...

htmlcssangularjsgridviewionic-framework

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

It seems that I am encountering an issue when trying to select the div elements within a container that has a defined shadow using pseudo elements ::before OR ::after. Once the shadow is applied, the div elements become unselectable. Please refer to the c ...

jqueryhtmlcss

Creating a QR code using base64 in PHP and HTML

My PHP code generates QR codes in WordPress, but some tax roles require the code to be in base64. I need help converting my code to work with Hexadecimal Encoding 64 and utf8. Here's a snippet of my current code: <?php $barcodetype = ...

phphtmlwordpress

The exact measurement of width is not specified in the custom element that extends HTMLCanvasElement

I have created a custom element that extends a canvas, but when I try to add it to the DOM, the width appears to be undefined. Here is my code snippet. class Renderer extends HTMLCanvasElement { constructor() { super(); } } customElements.def ...

javascripthtmlcanvascustom-element

View the selected radio buttons and checkboxes next to each other in real-time before finalizing and submitting

Within my form, individuals have the option to select from radio buttons and checkboxes. The challenge is that I need to display the chosen data on the page before they enter their email and submit! Since I cannot refresh the page, PHP won't work for ...

javascriptphpjqueryhtmlajax

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

cssvue.jsanimationsvg

What is the best way to choose the initial and final <td> that appears within a <tr>?

I am working with an html table that has the following structure: <table> <tbody> <tr> <input type="hidden" name="a" value="x"> <input type="hidden" name="b" value="y"> <td>First Ce ...

javascriptjqueryhtmlcss

Tips for fashionable dressing &

Can you provide some insights on how to format the &amp; symbol in this HTML snippet? <a>Ian</a> &amp; <a>Jim</a> ...

htmlcss

Adding an image to an HTML <span> element using the class attribute "

I need help adding an image to my HTML code. For example, how can I specify which image should be displayed in place of the placeholders? Thank you for your assistance! ...

htmlcssimage

Image of outer space enclosed by a circular boundary

Check out this fiddle I created here. It's a simple concept of an image inside a red circle. Is there a way to add some spacing around the image within the circle? This is the markup I currently have: <div style=" width: 50px; he ...

htmlcss