Imagine there is a rectangular image with dimensions of 1400px (height) x 700px (width). I am looking to turn it into a square while maintaining its original proportions and having white sides added. I specifically do not want to crop the image - I want it to completely fit into the square shape.
Any ideas on how to achieve this using CSS/Bootstrap?
To align your image in the center of a container, you can utilize CSS flexbox along with setting the maximum width and height properties to maintain proportions.
body {
background-color: #f7f7f7;
}
.square-img-container {
float: left;
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
background-color: white;
border: 1px solid #eee;
margin: 10px;
}
.square-img-container img {
max-height: 100%;
max-width: 100%;
}<div class="square-img-container">
<img src="https://via.placeholder.com/700x1400.png" alt="">
</div>
<div class="square-img-container">
<img src="https://via.placeholder.com/1400x700.png" alt="">
</div>I am currently working on improving the appearance of <p:inputTextArea/>. When the page loads, I notice: And when I click on that TextArea: Here is the code: <p:inputTextarea rows="6" value="#{bean.object.value}" style="width: 100%;" /> Is ...
I am a beginner in PHP and CSS. After extensive reading and learning little by little, I successfully implemented notifications in my project using PHP and CSS. It functions properly, displaying the counts (friends, messages, and notifications) and redire ...
In my situation, I am dealing with a nested list and enclosing div that was created by Drupal's menu system, so I am unable to modify it. My goal is to replicate the menu from a hardcoded website (link removed). How can I include the sub-items (ul l ...
I need to develop a custom toast component that includes a personalized message and class. While I have successfully passed the message as props, I am encountering difficulties in applying the bootstrap class. Component File: Toast.vue <script ...
I've looked into other SVG text questions, but I'm struggling to understand my mistake. Currently, I'm working on a live site at and implementing the following code: <svg class="svg-width desktop" style="margin:auto"> <path ...
Is it possible to slide a float type div inside another div like this example, but with a white box containing "apple" text sliding inside the black div it's in? I have attempted to recreate the effect using this example. Here is my current JavaScript ...
<table> <tr> <td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8 ...
Hey everyone, I recently discovered this incredibly helpful JavaScript sticky side navigation script and it works like a charm! However, since I don't know much about JS, I was wondering if there's a way to slow down the scrolling speed? functio ...
Check out this jsBin for reference: http://jsbin.com/uyonux/1 The hover state is working fine, but the focus state is not. I want the blue color to remain solid #13A3F7 without inheriting the opacity of .4. Is there a way to achieve this without the elem ...
Within my website, I have utilized the code font-family: 'Caesar Dressing',cursive,"brushsci"; However, it appears that two different fonts are being displayed on two separate pages. Please take a look at the font styles in the header menu of t ...
I have a fiddle where the black box is fixed on the page, but it overlaps the map when scrolling. I want to stop the black box from overlapping the map. How can I achieve this? CSS: .item{ background:#eee; padding:10px; width:50%; margin-bottom:15px;} .n ...
I've been attempting to align and stack some images within a bootstrap grid, but I'm having some trouble. Instead of aligning within the grid, the images seem to align to the window instead. I've been using position:absolute, which I found ...
Here is a Fiddle link: https://jsfiddle.net/r94dq2e4/ I have incorporated a slide-in menu from the left in my website using Twitter Bootstrap version 3. The menu appears when the navbar toggle button is clicked. This is the jQuery code responsible for ...
Currently, I am using webpack for developing a React app with a NodeJS backend. I've encountered an issue with styling the app as webpack seems to be interfering with my CSS, causing changes in class names. For example, in my base.css file, I have d ...
I am encountering difficulties in rendering my application.html.erb template as I am receiving the following error message: ActionView::SyntaxErrorInTemplate within ApplicationController#home app/views/layouts/application.HTML.erb:10: syntax error, unexpec ...
While working on a component using shadow DOM, I encountered the following error in the console: "Cannot read property 'style' of undefined". This issue seems to be related to my HTML code in PHP. The main challenge I am facing is figuring out ho ...
Currently, my footer is showing up at the top of the page but I really want it to be at the bottom. I'm new to HTML so apologies if this is a simple fix. Here is my file with internal CSS: .middle { position: fixed; top: 50%; left: 50%; tr ...
After a few days of learning vue.js, I decided to implement a custom toast function based on the official bootstrap-vue documentation: . I successfully created toasts using component instance injection and custom components in Vue. However, my goal now is ...
I am currently facing a dilemma with two CSS classes in my codebase. Despite having a stronger specificity, the second class is not being chosen over the first one. Can anyone shed some light on this issue? The CSS class that is currently being applied is ...
I seem to be having an issue with bootstrap scrollspy. For example: <header class="header pb-4 pb-lg-0 pt-4 sticky-top bg-white"> ... </header> <div class="container-fluid width content-main" data-bs-spy=" ...